Добавить элементы в список в угловых

Question

Добавить элементы в список в угловых

0

У меня есть следующее, чтобы создать работу с позицией и несколькими требованиями. Пример Plunker:

<div ng-controller="MainCtrl as vm">      
  <div>Position: <span data-ng-bind="vm.job.position"></span></div>      
  <br/>      
  <form name="form" data-ng-submit="vm.create(job)">        
    <label for="position">Enter the Position</label>
    <input id="position" name="vm.job.position" type="text" data-ng-model="vm.job.position" />
    <div>
      <br/>
      Requirements:
      <br/>
      <ul>
        <li data-ng-repeat="r in vm.job.requirements">{{r.name}}</li>
      </ul>
      <input id="name" name="requirement.name" type="text" data-ng-model="requirement.name" />
      <input type="button" value="Add Requirement" class="button" data-ng-click="vm.addRequirement(requirement)"/>          
    </div>        
    <br/><br/>                
    <button>Create Job</button>              
  </form>            
</div>

контроллер

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

  app.controller('MainCtrl', function($scope) {
    var vm = this;  
    vm.job = { position: '', requirements: [] };

    vm.create = function (job) {      
      alert("job created");    
    }

    vm.addRequirement = function (requirement) {
      vm.job.requirements.push(requirement);
    }  

});

Когда я добавляю требование, я вижу его в списке, но когда я пытаюсь добавить новый, тот, который уже в списке, начинает меняться. Мне этого не надо. Я хочу добавить новый список в список.

Наконец, когда я отправляю форму, используя "Создать задание", я отправлю все данные задания в API.

Miguel Moura 19 авг. 2016, в 16:50

Источник

0

Используйте переменную $scope вместо var . $scope связывается с представлением, тогда как var нет и является локальным для функции, в которой он был определен.
Sterling Archer 19 авг. 2016, в 14:25

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

Используйте переменную $scope вместо var . $scope связывается с представлением, тогда как var нет и является локальным для функции, в которой он был определен.

Simone Poggi · Answer 1 · 2016-08-19T12-15-00.000Z

Проблема заключается в вашей функции addRequirement, потому что вы добавляете тот же объект в список (и что причина, по которой ваш элемент меняет имя при редактировании окна ввода).

Чтобы ваш пример работал по назначению, вы должны нажать клон объекта требования (см. Документацию).

 vm.addRequirement = function (requirement) {
   vm.job.requirements.push( angular.copy(requirement) );
 }

xyztdanid4 · Answer 2 · 2016-08-19T12-25-00.000Z

Самый простой способ сделать это - просто использовать ng-модель на вкладке, которую вы хотели бы добавить в свой список. Затем вы можете легко получить доступ к нему с контроллера.

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

app.controller('MainCtrl', function($scope) {

  var vm = this;
  vm.job = { position: '', requirements: [] };

  function create(job) {
    alert("job created");
  }

  function addRequirement() {
    vm.job.requirements.push(vm.currentRequirement);
  }

  vm.create = create;
  vm.addRequirement = addRequirement;

});

и в html:

 <input type="button" value="Add Requirement" ng-click="vm.addRequirement()"/>