使用Angular遍历表

Question

我是angular和js的新手。 我做了一个表（只是一个标题）和一个按钮。 当我单击按钮时，将添加新的行行。 该行的每个单元格都是一个表单文本字段。 一切正常。 现在，我尝试做第二个按钮，当我单击它时，它必须遍历行并验证字段。 我没有找到关于此的任何文档...所以我不确定此方法（添加带有按钮的新行）是否合适。 我就是这样的：

index.html，其中包含angular和我的脚本，还包含以下路线：

<html ng-app="assets">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="sources/js/angular.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
        <script>
            var assets = angular.module('assets', ['ngRoute']);

            assets.config(function($routeProvider) {
                $routeProvider.
                when('/', {
                    templateUrl: 'home.html'
                }).
                when('/:tipusactius', {
                    templateUrl: 'tipusactius.html',
                    controller: 'TipusActiusCtrl'
                }).
                when('/:tipusactius/alta', {
                    templateUrl: 'tipusactius-alta.html',
                    controller: 'AfegirTipusActiusCtrl'
                }).
                otherwise({
                    redirectTo: '/'
                });
            });


            assets.controller('TipusActiusCtrl', function ($scope, $http){
                $http.get('http://10.0.203.73/WS/ws.php/tipusactius/').success(function(data) {
                    $scope.tipus_actius = data;
                });

                // Ordena taula per id desc
                $scope.sortField = 'idtipus_actius';
                $scope.reverse = false;
            });

            assets.controller('AfegirTipusActiusCtrl', function ($scope, $http){

                    // Camps formulari text pla
                    $scope.nomAtribut = "<input type='text' name='firstname'>";
                    $scope.mida = "<input type='number' name='firstname'>";
                    $scope.obligatori = "<input type='checkbox' name='vehicle' value='yes'>";

                    // Construeix combo
                    $http.get('http://10.0.203.73/WS/ws.php/getCombo/1').success(function(data) {
                        $scope.options = data;
                    });

                    $scope.atributs = [];
                    $scope.addField = function() {
                        $scope.atributs.push($scope.atributs.length);
                    };

                    $scope.prioritat = $scope.atributs.length;
            });

            assets.directive('compile', compile);

            function compile($compile)
            {
                return {
                    restrict: 'A',
                    replace: true,
                    link: linkFunction
                };

                function linkFunction(scope, element, attrs)
                {
                    scope.$watch(
                        function (scope)
                        {
                            return scope.$eval(attrs.compile);
                        },
                        function (value)
                        {
                            element.html(value);

                            $compile(element.contents())(scope);
                        }
                    );
                }
            }

            </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>
    <body>
        <div class="container" ng-view></div>
    </body>
</html>

这是表所在的视图（tipusactius-alta）：

    <div class="row">
        <div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
            <button ng-click="addField()">Nou atribut</button>
            <div>
                <table class="table">
                    <tr>
                        <td>Nom atribut</td>
                        <td>Tipus</td>
                        <td>Mida</td>
                        <td>Prioritat</td>
                        <td>Obligatori</td>
                    </tr>
                    <tr ng-repeat="atribut in atributs">
                        <td compile="nomAtribut"></td>
                        <td>
                            <select id="tipus">
                                <option ng-repeat="option in options" value="{{option.idvalors_combo}}">{{option.valor}}</option>
                            </select>
                        </td>
                        <td compile="mida"></td>
                        <td>
                            <select id="prioritat">
                                <option ng-repeat="p in prioritat" value="{{p}}">{{p}}</option>
                            </select>
                        </td>
                        <td compile="obligatori"></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

我不确定这是否是个好主意。 我想找到一种遍历行以读取单元格值的方法，并且如果所有行中所有单元格的值都可以，请将这些值提交给Web服务，但我不知道。 任何帮助都会很棒。

Answer 1

您实际上不需要直接操作html。 只需对数据收集使用ng-repeat。 Button应该将新项目添加到该集合中，Angular将在文档中创建新表行。

我在这里创建了一个小样本： http : //jsfiddle.net/Lvc0u55v/252/

var myApp = angular.module('myApp', []);

myApp.controller('tableCtrl', function($scope) {

  $scope.dataTable = [{
    "name": "Alex",
    "lastName": "Karlov",
    "age": 23,
    "sex": 1
  }];


  $scope.options = [{
    "value": 1,
    "title": "Male"
  }, {
    "value": 2,
    "title": "Female"
  }];


  $scope.addRow = function() {
    var newItem = {
      name: "",
      lastName: "",
      age: "",
      sex: ""
    }
    $scope.dataTable.push(newItem);
  };

});

这是html（我根据您的代码创建了它）：

<div class="col-md-8" ng-controller="tableCtrl">
  <button ng-click="addRow()">Add row</button>
  <div>
    <table class="table">
      <tr>
        <td>#</td>
        <td>Name</td>
        <td>Last Name</td>
        <td>Age</td>
        <td>Sex</td>
      </tr>
      <tr ng-repeat="item in dataTable">
        <td>{{ $index + 1 }}</td>
        <td>
          <input type="text" ng-model="item.name" />
        </td>
        <td>
          <input type="text" ng-model="item.lastName" />
        </td>
        <td>
          <input type="text" ng-model="item.age" />
        </td>
        <td>
        <select ng-options="option.value as option.title for option in options" ng-model="item.sex"></select>
        </td>
      </tr>
    </table>
  </div>
</div>

在该示例中，我已将所有数据放入dataTable变量中。 当我想再增加一行时，我只需要向dataTable集合中添加新的空对象（或具有预定义值）。 Angular可以解决问题。

使用Angular遍历表

问题描述

1 个解决方案

解决方案1
0 2016-02-24 20:33:33

使用Angular遍历表

问题描述

1 个解决方案

解决方案1 0 2016-02-24 20:33:33

解决方案1
0 2016-02-24 20:33:33