Угловое динамическое поле в форме не отображается в представлении

Это сбивает с толку. Это такая простая вещь, но я не могу заставить ее работать. Я добавляю поле ввода в форму по нажатию кнопки (изначально). На данный момент я просто пытаюсь увидеть любое значение в представлении (отсюда и простой тег p)

ПРОСМОТР HTML

<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="vm.addVals()">
    <i class="material-icons">add</i>
</md-button>

<div ng-if="moreVal">
    <div data-ng-repeat="vl in valHolder.valArr track by $index">
    <p>My Value: {{vl.myVal}}</p>
</div>

Контроллер

 function EditFormController($scope, $sanitize, ngToast) {
  var vm = this;
  vm.addVals = addVals;
  $scope.valHolder= {valArr: []};
  function addVals(){
   var ln = $scope.valHolder.valArr.length;
   $scope.valHolder.valArr.push({myVal: 'Test'+ln});  
   $scope.moreVal = true;
  }
 }());

Я проверил, что valArr заполняется новыми значениями myVal при нажатии кнопки. Но я ничего не вижу в представлении. div ng-repeat пуст. Почему это происходит? Я искал решение весь день, но это настолько абсурдно, что ни у кого нет этой проблемы. Не знаю, что я делаю неправильно. Я был бы очень признателен за ответ.


javascript angularjs dynamicform
person KVNam    schedule 22.02.2017    source источник
comment
У вас есть ошибка в консоли?   -  person Mistalis    schedule 22.02.2017
comment
Используете ли вы контроллер в качестве синтаксиса в представлении? Не могли бы вы показать весь HTML-код?   -  person Ankit Vadi    schedule 22.02.2017
comment
@Mistalis Нет ошибок в консоли   -  person KVNam    schedule 22.02.2017
comment
@Ankit Vadi Да, но, похоже, не для этой функции. Может ли это быть?   -  person KVNam    schedule 22.02.2017
comment
@AnkitVadi Вы были правы, использование $scope, когда я использую контроллер в качестве синтаксиса, является причиной ошибки. Пожалуйста, напишите это как ответ, чтобы я мог выбрать его. Спасибо.   -  person KVNam    schedule 22.02.2017
comment
я написал ответ   -  person Ankit Vadi    schedule 22.02.2017

Ответы (3)


arrow_upward
0
arrow_downward

Напишите ниже код в вашем контроллере:

var self = this;
self.valHolder= {valArr: []};
function addVal(){
  var ln = self.valHolder.valArr.length;
  self.valHolder.valArr.push({myVal: 'Test'+ln});  
  self.moreVal = true;
}

Напишите в своем HTML, как показано ниже:

<div ng-if="moreVal">
    <div data-ng-repeat="vl in vm.valHolder.valArr track by $index">
    <p>My Value: {{vl.myVal}}</p>
</div>
person Ankit Vadi    schedule 22.02.2017
comment
Разве это не должно быть self.valHolder.valArr в HTML? - person KVNam; 22.02.2017
comment
Нет, вы используете свой синтаксис, например ng-controller=EditFormController as vm, верно? Тогда, по вашему мнению, self будет называться vm. Или, если вы определяете маршрут, это будет похоже на контроллер: EditFormController и controllerAs: vm - person Ankit Vadi; 22.02.2017
comment
На самом деле это не так, я только указал ng-controller=EditFormController, и, похоже, он работает нормально. Не уверен, что я что-то здесь упускаю. Все еще изучаю веревки с Angular, так что извините за невежество. - person KVNam; 22.02.2017
comment
Вы написали var vm = this; и я написал var self = this;. Таким образом, в основном vm и self указывают на один и тот же объект. Если vm отлично работает в представлении, вы также можете использовать vm, потому что в конечном итоге оба являются одними и теми же объектами. - person Ankit Vadi; 22.02.2017

arrow_upward
0
arrow_downward

Ваша функция addVal не вызывается. Пожалуйста, измените представление HTML на это:

<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="addVal()">
    <i class="material-icons">add</i>
</md-button>

<div ng-if="moreVal">
    <div data-ng-repeat="vl in valHolder.valArr track by $index">
    <p>My Value: {{vl.myVal}}</p>
</div>

и код контроллера к этому-

 $scope.valHolder = { valArr: [] };
 $scope.addVal = function () {
    var ln = $scope.valHolder.valArr.length;
    $scope.valHolder.valArr.push({ myVal: 'Test' + ln });
    $scope.moreVal = true;
 }

Если вы используете синтаксис ControllerAs и указали controllerAs:"vm", тогда ваш код будет ниже

<span>Add secondary field</span>
<md-button class="md-fab md-mini" ng-click="vm.addVal()">
    <i class="material-icons">add</i>
</md-button>

<div ng-if="vm.moreVal">
    <div data-ng-repeat="vl in vm.valHolder.valArr track by $index">
    <p>My Value: {{vl.myVal}}</p>
</div>

и код контроллера к этому-

var self = this;
 self.valHolder = { valArr: [] };
 self.addVal = function () {
    var ln = self.valHolder.valArr.length;
    self.valHolder.valArr.push({ myVal: 'Test' + ln });
    self.moreVal = true;
 }
person Pawan Gupta    schedule 22.02.2017
comment
вызывается функция addVal. Это была опечатка с моей стороны. Извиняюсь. Я отлаживал операторы консоли и знаю, что valArr заполняется правильно. Проблема только в том, что вид ничего не показывает. - person KVNam; 22.02.2017
comment
Я только что попробовал это на своем конце, и решение, которое я дал, работает. вы добавили $scope.addVal = function() { ... } в код вашего контроллера - person Pawan Gupta; 22.02.2017
comment
Пожалуйста, найдите мой обновленный ответ, если вы используете синтаксис controllerAs - person Pawan Gupta; 22.02.2017
comment
Да, в этом была проблема, Анкит Вади первым нашел ответ, поэтому наградил его ответом. - person KVNam; 22.02.2017

arrow_upward
0
arrow_downward

Вы используете ng-click="vm.addVals()" и $scope в контроллере.

Я думаю, вы также должны использовать var vm в контроллере. Добавьте эти строки:

var vm = this;
vm = {};

а также

vm.addVals = addVals;
person SaMeEr    schedule 22.02.2017
comment
Я согласен, что именно этот конфликт привел к проблеме, но Анкит Вади первым нашел ответ. Спасибо - person KVNam; 22.02.2017