Итерация через стол с использованием углового

Я новичок в угловых и js. Я сделал таблицу (только заголовок) и кнопку. Когда я нажимаю кнопку, добавляется новая строка строки. Каждая ячейка этой строки является текстовым полем формы. Everithing отлично работает. Теперь я пытаюсь сделать вторую кнопку, когда я нажимаю ее, она должна перебирать строки и проверять поля. Я не нахожу документацию об этом ... поэтому я не уверен, что этот mettod (добавить новую строку с кнопкой) подходит. Вот как я это сделал:Итерация через стол с использованием углового

index.html это содержит угловую и мой сценарий, также содержит маршруты:

<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-Альта):

<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>

Я не уверен, если это была хорошая идея. Я хотел бы найти способ итерации по строкам для чтения значений ячеек, и если значения всех ячеек из всех строк соответствуют значениям для веб-службы, но я понятия не имею. Любая помощь будет отличной.

источник

2016-02-24 proktovief

Все ли ячейки редактируются постоянно? – charlietfl

Да, редактируются все время – proktovief

На самом деле вам не нужно напрямую манипулировать html. Просто используйте ng-repeat над вашей коллекцией данных. Кнопка должна добавить новые элементы в эту коллекцию, а угловая создаст новую таблицу в документе.

Я создал небольшой образец здесь: 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 (я создал его на основе кода Yours):

<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. Угловой будет делать трюк.

источник

2016-02-24 20:33:33

Хорошо, я понимаю. Но тогда как я могу читать строки и работать с ним? Я очень потерял около – proktovief

Вы можете перебирать dataTable (в моем примере) для обработки любого типа. Дайте мне пример вашего сценария, и я попытаюсь проиллюстрировать их. Вы можете просто отправить всю таблицу данных на сервер или выполнить проверку или другое слово. –

Да, но я думаю, что не очень хорошо себя объяснил. Есть 5 столбцов (2 поля выбора, 1 текстовое поле, 1 поле номера и 1 флажок) будут работать соответствующим образом? Ваша идея выглядит намного более разумной, чем моя. – proktovief

Итерация через стол с использованием углового

ответ

Смежные вопросы