Question

这是我的angularjs代码，用于获取表中的值并保存。如果我把一些数据放在表中并保存，它的工作正常但是如果我点击保存而不在表中输入任何数据它会显示错误

TypeError：$ scope.item未定义

这是我的代码，请帮助我。我是angularJS的新手

    <div ng-app="Myapp">

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
         <script>
            var Myapp = angular.module('Myapp', ["ngRoute"]);
        </script>

        <div ng-controller="orderFormController">
            <table  id="item_table">
                <thead>
                    <tr class="headings">
                        <th class="column-title">Item </th>            
                        <th class="column-title">Rate</th>                          

                        </th>

                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>         
                            <input type="text" name="item"  ng-model='item[0]'>
                        </td>

                        <td>
                        <input type="text" name="rate"  ng-model='rate[0]'> 
                       </td>

                    </tr>
                    <tr>
                        <td>         
                            <input type="text" name="item"  ng-model='item[1]'>
                        </td>

                        <td>
                        <input type="text" name="rate"  ng-model='rate[1]'> 
                        </td>

                    </tr>


                </tbody>

            </table>
            <button type="button"  ng-click='saveorder()' >SAVE ORDER</button>
        </div>    
        <script>
            Myapp.controller('orderFormController', ['$scope', '$http', function ($scope, $http) {
                var data = {};
                data['item'] = [];
                $scope.saveorder = function () {
                    var rowCount = 3;
                    for (i = 1; i < rowCount; i++) {
                        data['item'][i] = {'item': $scope.item[i], 'rate': $scope.rate[i]}

                    }
                    alert(data);
                }

            }]);
        </script>

Answer 1

除了for循环外，

$scope.item没有定义，如果表中没有值，那么$scope.item将保持未定义。您可以在for循环之前简单地声明它，并设置一些初始值，这可以在控制器中完成，或者使用ng-init指令。

另外，我建议对表行使用ng-repeat指令，它会从集合中为每个项目创建一个模板，这使您的代码更易于管理。这是文档：ngRepeat

Answer 2

修改你的html只包括这两行输入

<td>         
   <input type="text" name="item"  ng-model='item'>
</td>
<td>

   <input type="text" name="rate"  ng-model='rate'> 
</td>

并修改您的saveOrder

$scope.saveorder = function () {
       if (!($scope.item.length && $scope.rate.length)){
              alert('can\'t be empty');
              return;
       }
       data['item'].push({'item': $scope.item, 'rate': $scope.rate});
       $scope.item = "";
       $scope.rate = "";
       console.log(data['item'][data['item'].length - 1]);
       alert(data);
}

定义并从angularJS表中获取值

2 个答案: