Блог

У меня есть четыре поля ввода, которые я использую для добавления свойств к одному объекту, используя ng-model= model.propertyName . У меня есть ряд флажков, которые я создаю с помощью ng-repeat, и я не мог понять, как добавить уникальные имена свойств для каждой ng-модели, поскольку они были созданы с помощью ng-repeat. В качестве обходного пути (или, может быть, это правильно, я не уверен) Я смог написать функцию для добавления проверенных элементов в массив. Затем я пытался использовать цикл for для перебора массива и добавления каждого выбранного propertyName (строки) в объект ng-model в качестве нового свойства, используя ng-click для вызова функции.

Как есть, когда я нажимаю кнопку «Добавить специалиста», я получаю следующий вывод ошибки:

Ошибка типа: не удается прочитать свойство ‘selection’ неопределенного значения в области видимости.$scope.addTechnician (…. /scripts/controllers.js:

Это происходит потому, что $scope не определен внутри условия моего цикла for в функции addTechnician. Я не могу понять, почему, потому что, когда я передаю $scope функции addTechnician, она распознает NewTech внутри цикла for . Когда я не передаю $scope функции addTechnician, он сообщает, что NewTech не определен со следующей ошибкой:

Ошибка типа: не удается установить свойство ‘cert1’ неопределенного
значения в области видимости.$scope.addTechnician(…/scripts/ controllers)

Я почти уверен, что это как-то связано с тем, как ng-repeat создает новую область, которая прототипически наследуется от родительской области. Но опять же, я не уверен.

Вот мой контроллер

 use strict';
angular.module('Carrepair2.controllers', [])

.controller('SetupCtrl', function($scope) {

  $scope.certifications = [
    {'name':'Engine Repair'},
    {'name':'A/T amp; Transaxle'},
    {'name':'Manual Drive Train amp; Axles'},
    {'name':'Suspension amp; Steering'},
    {'name':'Brakes'},
    {'name':'Electrical amp; Electronic Systems'},
    {'name':'Heating amp; Air Conditioning'},
    {'name':'Engine Performance'},
    {'name':'Light Vehicle Diesel Engines'}
  ];

  // selected certifications
  $scope.selection = [];

  $scope.toggleCert = function(name) {
    var idx = $scope.selection.indexOf(name);

    //is currently selected
    if (idx > -1) {
      $scope.selection.splice(idx, 1);
    }
    //is newly selected
    else{
      $scope.selection.push(name);
    }
  };

  $scope.addTechnician = function($scope) {
    for(var i=0; i < $scope.selection.length - 1; i  ){
      $scope.newTech['cert'   (i   1).toString()] = $scope.selection[i].name;
    }
  };

})
  

Вот мой шаблон

 <form class="col-md-6">
    <div class="input_wrapper">
        <input type="text" name="first-name" ng-model="newTech.firstName" required>
        <label for="first-name">First Name</label>
    </div>
    <div class="input_wrapper">
        <input type="text" name="last-name" ng-model="newTech.lastName" required>
        <label for="last-name">Last Name</label>
    </div>
    <div class="input_wrapper">
        <input type="email" name="email" ng-model="newTech.email" required>
        <label for="email">Email</label>
    </div>
    <div class="input_wrapper">
        <input type="tel" name="phone" ng-model="newTech.phone" required>
        <label for="phone">Phone</label>
    </div>
    <h5>Check all held ASE certifications</h5>
    <ul class="list">
        <li class="item item-checkbox" ng-repeat="certification in certifications">
        <label class="checkbox">
            <input type="checkbox" value="{{certification.name}}" ng-checked="selection.indexOf(certification.name) > -1" ng-click="toggleCert(certification)">
        </label>
        {{certification.name}}
    </li>
    </ul>
    <button class="button button-block" ng-click="addTechnician()">Add Technician</button>
</form>
  

В идеале после нажатия кнопки «Добавить специалиста» я хочу получить объект, мой объект NewTech ng-model, который содержит данные поля ввода и свойства из отмеченных элементов. Вот jsFiddle с упрощенным кодом, воспроизводящим проблему

http://jsfiddle.net/aq93z/7/

Я решил это. Мне пришлось отформатировать свой цикл, используя angular.forEach(values, function(value, index){ вот jsFiddle с решением http://jsfiddle.net/aq93z/9 /. Если вы посмотрите на объект $scope.NewTech, созданный в консоли, выбранные флажки добавляются как свойства объекта NewTech ng-model.