最受欢迎

Angular JS - ng-repeat error

Angular JS - ng-repeat error

本文关键字：error ng-repeat JS Angular | 更新日期: 2023-09-27

我的英语不太好，所以我提前为我的拼写错误道歉

我在一个已经用angular js开发的网站上创建了一个用户管理页面，但这是我第一次使用它，我无法找出错误
当我点击index.html页面上的列表要发送回页面amministrazione2.html，其中"应该"启动脚本从数据库获取数据并将它们插入表中，但视频显示

<tbody> <!-- ngRepeat: prezzo in prezzi --> <t/ body>


而不是my data


这是index.html，左边有一个列表，每个项都重定向到一个。html页面

<!DOCTYPE html>
<html ng-app="sin...">
  <head></head>
<body>
    <div class="left_col scroll-view">
            <div ng-include="'includes/header.html'"></div>
            </div>
    </div>
    <div ng-include="'includes/footer.html'"></div>
    </div>
    <script src="//code.angularjs.org/1.5.7/angular.js"></script>
    <script src="//code.angularjs.org/1.5.7/angular-route.js"></script>
    <script src="//code.angularjs.org/1.5.7/angular-cookies.js"></script>
    <script src="//code.angularjs.org/1.5.7/angular-messages.js"></script>
    <script src="js/app.js"></script>
    <script src="modules/amministrazione2/controllers.js"></script>
</body>
</html>

这是标题，左边列表中有元素

<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
   <div class="menu_section">
     <li>
       <a href="#/amministrazione2">
          <i class="fa fa-cog infospan"></i> Amministrazione2 <span class="fa fa-chevron-right"></span></a>
     </li>
   </div>
</div>

这是app.js文件，里面有angular模块的声明

'use strict';
// declare modules
angular.module('Ammi', []);
angular.module('Amministrazione', []);
angular.module('Authentication', []);
angular.module('Home', []);
angular.module('Fornitore', []);
angular.module('Cantiere', []);
angular.module('Prezziario', []);
angular.module('Calendar', []);
angular.module('Computo', []);
angular.module('Forniture', []);
angular.module('Listino', []);
angular.module('Sal', []);

angular.module('sin...', [
    'Amministrazione',
    'Ammi',
    'Authentication',
    'Home',
    'Fornitore',
    'Cantiere',
    'Prezziario',
    'Calendar',
    'Computo',
    'Forniture',
    'Listino',
    'Sal',
    'ngRoute',
    'ngCookies',
    'ngMessages',
    'smart-table'
])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/amministrazione2', {
            controller: 'AmmiController',
            templateUrl:  'modules/amministrazione2/views/amministrazione2.html',
            hideMenus: true
        })
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'modules/home/views/home.html'
        })
        .otherwise({ redirectTo: '/login' });
}])

这是我的PHP文件，用于搜索db上的用户信息

<?php
    require_once '../includes/dbconnector.php';
    $sql = "SELECT a.id_utente, a.id_ruolo, a.nome, a.cognome, a.comune, a.indirizzo, a.cap, a.telefono1, a.telefono2, a.email, a.fax, a.note, a.user, a.password, a.calendario FROM `sal_t_utente` a ORDER BY a.id_utente";
    // use prepared statements, even if not strictly required is good practice
    $stmt = $conn->prepare( $sql );
    // execute the query
    $stmt->execute();
    // fetch the results into an array
    $result = $stmt->fetchAll( PDO::FETCH_ASSOC );
    $json = json_encode($result);
    return $json;
}
?>

这是我创建的用于插入和修改表数据的角控制器

'use strict';
angular.module('Ammi').controller('AmmiController',
    ['$scope', '$rootScope', '$location','$http',
    function ($scope, $rootScope, $location, $http) {
        $scope.selectedPrezzo = '';
       $scope.getPrezzi = function()
       {
           $http.get('./api/amministrazione2/ricerca.php').
                success(function(data) {
                    $scope.prezzi = data;
                    $scope.prezziCollection= data;
                });
       };
       $scope.editPrezzo = function(prezzo)
       {
            $scope.selectedPrezzo = prezzo;
       };
       $scope.salvaPrezzo = function(prezzo)
       {
            $http.post('./api/amministrazione2/aggiorna.php', {
                'id_utente' : prezzo.id_utente, 
                'id_ruolo' : prezzo.id_ruolo,
                'nome' : prezzo.nome,
                'cognome' : prezzo.cognome,
                'comune' : prezzo.comune, 
                'indirizzo' : prezzo.indirizzo,
                'cap' : prezzo.cap,
                'telefono1' : prezzo.telefono1, 
                'telefono2' : prezzo.telefono2,
                'email' : prezzo.email,
                'fax' : prezzo.fax, 
                'note' : prezzo.note,
                'user' : prezzo.user,
                'password' : prezzo.password,
                'calendario' : prezzo.calendario
                }
                ).success(function (data, status, headers, config) {
                    $scope.resetPrezzo();
                });
       };
       $scope.resetPrezzo = function()
       {
            $scope.getPrezzi();
            $scope.selectedPrezzo = '';
       };
       $scope.go = function ( path ) {
          $location.path( path );
        };  
    }]);

这是显示用户信息的adminazioni2 .html 

    <div ng-controller="getPrezzi" >
  <table st-table="prezzi" st-safe-src="prezziCollection" class="bootstrap-table table table-hover table-striped table-bordered tableBlueTh">
    <thead>
                <th>Id Utente</th>
                <th>Id Ruolo</th>
                <th>Nome</th>
                <th>Cognome</th>
                <th >Comune</th>
                <th>Indirizzo</th>
                <th>Cap</th>
                <th >Telefono 1</th>
                <th>Telefono 2</th>
                <th >Email</th>
                <th>Fax</th>
                <th>Note</th>
                <th>User</th>
                <th>Password</th>
                <th>Calendario</th>
                <th></th>
    </thead>
    <tbody>
    <tr ng-repeat="prezzo in prezzi">
        <td>{{prezzo.id_utente}}</td>
        <td>{{prezzo.id_ruolo}}</td>
        <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.nome}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.nome" value="{{prezzo.nome}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.cognome}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.cognome" value="{{prezzo.cognome}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.comune}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.comune" value="{{prezzo.comune}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.indirizzo}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.indirizzo" value="{{prezzo.indirizzo}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.cap}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.cap" value="{{prezzo.cap}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.telefono1}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="tel" class="form-control" ng-model="prezzo.telefono1" value="{{prezzo.telefono1}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.telefono2}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="tel" class="form-control" ng-model="prezzo.telefono2" value="{{prezzo.telefono2}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.email}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.email" value="{{prezzo.email}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.fax}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="tel" class="form-control" ng-model="prezzo.fax" value="{{prezzo.fax}}"></div>
                    </td>
                    <td>
                        <div  ng-if="selectedPrezzo != prezzo">{{prezzo.note}}</div>
                        <div ng-if="selectedPrezzo == prezzo"><input type="textbox" class="form-control" ng-model="prezzo.note" value="{{prezzo.note}}"></div>
                    </td>
        <td>{{prezzo.user}}</td>
        <td>{{prezzo.password}}</td>
        <td>{{prezzo.calendario}}</td>
        <td>
            <div  ng-if="selectedPrezzo != prezzo">
                <button ng-click="editPrezzo(prezzo)" class="btn btn-primary">Modifica</button>
            </div>
            <div  ng-if="selectedPrezzo == prezzo">
                <button ng-click="salvaPrezzo(prezzo)" class="btn btn-primary">Salva</button>
                <button ng-click="resetPrezzo()" class="btn btn-danger">Annulla</button>
            </div>
        </td>
    </tr>
    </tbody>
    <tfoot>
            <tr>
                <td colspan="16" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
                </td>
            </tr>
        </tfoot>
   </table>
</div>

最后这是我在网站上看到的

<div ng-view="" class="ng-scope">

<div ng-controller="getPrezzi" class="ng-scope">
    </div><table st-table="prezzi" st-safe-src="prezziCollection" class="bootstrap-table table table-hover table-striped table-bordered tableBlueTh ng-scope">
    <thead>
                <tr><th>Id Utente</th>
                <th>Id Ruolo</th>
                <th>Nome</th>
                <th>Cognome</th>
                <th>Comune</th>
                <th>Indirizzo</th>
                <th>Cap</th>
                <th>Telefono 1</th>
                <th>Telefono 2</th>
                <th>Email</th>
                <th>Fax</th>
                <th>Note</th>
                <th>User</th>
                <th>Password</th>
                <th>Calendario</th>
                <th></th>
    </tr></thead>
    <tbody>
    <!-- ngRepeat: prezzo in prezzi -->
    </tbody>
    <tfoot>
            <tr>
                <td colspan="16" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7" class="ng-isolate-scope"><!-- ngIf: numPages && pages.length >= 2 --></div>
                </td>
            </tr>
        </tfoot>
</table>
</div>

我在下面添加了一个网站的页面功能我的网页

modificaprezzario.html 

<div ng-controller="getPrezzi" >

<table st-table="prezzi" st-safe-src="prezziCollection" class="bootstrap-table table table-hover table-striped table-bordered tableBlueTh">
    <colgroup>
        <col width="20%">
        <col width="50%">
        <col width="5%">
        <col width="5%">
        <col width="5%">
        <col width="25%">
     </colgroup>
    <thead>
    <tr>
        <th colspan="6"><input st-search="" class="form-control" placeholder="Ricerca globale ..." type="text"/></th>
    </tr>
    <tr>
        <th colspan="6" style="padding-bottom: 2em;background:#FFF"></th>
    </tr>
    <tr>
        <th st-sort="tariffa" class="pointer" title=Tariffa">Tariffa</th>
        <th st-sort="descrizione" class="pointer" title=Descrizione">Descrizione</th>
        <th st-sort="descrizione" class="pointer">Unit&agrave; di misura</th>
        <th st-sort="prezzo" class="pointer">Prezzo Listino</th>
        <th st-sort="prezzo_azie" class="pointer">Prezzo Aziendale</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="prezzo in prezzi">
        <td>{{prezzo.tariffa}}</td>
        <td>{{prezzo.descrizione}}</td>
        <td>{{prezzo.unita_misura}}</td>
        <td>{{prezzo.prezzo}}</td>
        <td>
            <div  ng-if="selectedPrezzo != prezzo">{{prezzo.prezzo_azie}}</div>
            <div ng-if="selectedPrezzo == prezzo"><input type="number" class="form-control" ng-model="prezzo.prezzo_azie" value="{{prezzo.prezzo_azie}}"></div>
        </td>
        <td>
            <div  ng-if="selectedPrezzo != prezzo">
                <button ng-click="editPrezzo(prezzo)" class="btn btn-primary">Modifica</button>
            </div>
            <div  ng-if="selectedPrezzo == prezzo">
                <button ng-click="salvaPrezzo(prezzo)" class="btn btn-primary">Salva</button>
                <button ng-click="resetPrezzo()" class="btn btn-danger">Annulla</button>
            </div>
        </td>
    </tr>
    </tbody>
    <tfoot>
            <tr>
                <td colspan="6" class="text-center">
                    <div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
                </td>
            </tr>
        </tfoot>
</table>

</div>

controller.js 

'use strict';
var myPrezziario = angular.module('Prezziario');
myPrezziario.controller('PrezziarioController',
    ['$scope', '$rootScope', '$location','$http',
    function ($scope, $rootScope, $location, $http) {
       $scope.selectedPrezzo = '';
       $scope.getPrezzi = function()
       {
            $http.get('./api/prezzario/ricerca_prezzario.php').
                success(function(data) {
                    $scope.prezzi = data;
                    $scope.prezziCollection= data;
                });
       };
       $scope.editPrezzo = function(prezzo)
       {
            $scope.selectedPrezzo = prezzo;
       };
       $scope.salvaPrezzo = function(prezzo)
       {
            $http.post('./api/prezzario/aggiorna_prezzo.php', {
                'id_prezzario' : prezzo.id_prezzario, 
                'prezzo_azie' : prezzo.prezzo_azie
                }
                ).success(function (data, status, headers, config) {
                    $scope.resetPrezzo();
                });
       };
       $scope.resetPrezzo = function()
       {
            $scope.getPrezzi();
            $scope.selectedPrezzo = '';
       };
       $scope.go = function ( path ) {
          $location.path( path );
        };  
    }]);

ricerca_prezzario.php 

<?php
require_once '../includes/dbconnector.php';

// a query get all the records from the users table
$sql = 'SELECT a.id_prezzario, a.tariffa, a.descrizione, a.unita_misura, a.prezzo, a.prezzo_azie  FROM sal_d_prezziario a order by a.tariffa';
// use prepared statements, even if not strictly required is good practice
$stmt = $conn->prepare( $sql );
// execute the query
$stmt->execute();
// fetch the results into an array
$result = $stmt->fetchAll( PDO::FETCH_ASSOC );
// convert to json
$json = json_encode( $result );
// echo the json string
echo $json;
?>

aggiorna_prezzo.php 

<?php
require_once '../includes/dbconnector.php';
$sql = "update sal_d_prezziario set prezzo_azie = :prezzo_azie where id_prezzario = :id";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':prezzo_azie', $data->prezzo_azie); 
$stmt->bindParam(':id', $data->id_prezzario); 
$stmt->execute();
?>
相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习