2016-10-19 2 views
0

У меня есть поля ввода в DOM, которые я захватываю с помощью ng-модели.Нажимать значения массива в контроллере

В мой контроллер, у меня есть массив:

app.controller('mainCtrl', function() { 
    // set an empty array 
    self.manualEntry = []; 

    /** 
    * ensure form validation 
    * @returns boolean - ng-disabled value 
    */ 
    self.disableForm = function() { 
     if (self.manualEntry.length <= 0) { 
      return true; 
     } 
     else { 
      return false; 
     } 
    }; 
}); 

На мой взгляд, у меня есть поля ввода:

<form> 
    <input placeholder="John" ng-model="mainCtrl.manualEntry.firstName"/> 
    <input placeholder="Smith" ng-model="mainCtrl.manualEntry.lastName"/> 
</form> 

<button type="submit" 
     ng-disabled="mainCtrl.disableForm()" 
     title="Submit">Submit 
</button> 

Я думал, что $scope автоматически обновил модель для использования в контроллер. Я думал, что использование dot notation в DOM приведет к этим значениям в массив.

Когда я обновляю эти значения, кнопка submit в форме остается отключенной (т. Е. Функция disableForm() возвращает true).

Как я могу нажимать эти значения до self.manualEntry, когда они меняются или обновляются на DOM?

+0

Во-первых, название контроллера не должно отображаться в нг-модели тега. Таким образом, это должно быть: ng-model = "manualEntry.firstName". То же самое в вашем ng-disabled. И тогда, почему бы не использовать «$ scope.manualEntry» именно так? Поскольку manualEntry.firstName и manualEntry.lastName означает, что у вас есть объект, например $ scope.manualEntry {firstName: '', lastName: ''} –

+1

Почему вы используете массив вместо объекта? –

+0

@ M.Be OP использует контроллер вместо области видимости. Совершенно действительный и даже рекомендуемый вариант. –

ответ

0

Я делаю большое предположение о том, что вы хотите, но кажется, что правильная проверка формы - это способ пойти на это. Демо на http://plnkr.co/edit/Nzmk3R8eU0fmbBZRrTBa?p=info.

Controller Код

вар приложение = angular.module ('plunker', []);

app.controller('MainCtrl', function($scope) { 
    // set an empty array 
    var self = this; 
    self.manualEntry = {}; 

    //Let HTML5 handle the form validation itself 
    self.printInfo = function() { 
    console.log(self.manualEntry); 
    }; 
}); 

HTML код:

<body ng-controller="MainCtrl as mainCtrl"> 
    <form ng-submit="mainCtrl.printInfo()"> 
    <input placeholder="John" ng-model="mainCtrl.manualEntry.firstName" ng-required="true" /> 
    <input placeholder="Smith" ng-model="mainCtrl.manualEntry.lastName" ng-required="true" /> 

    <button type="submit" title="Submit">Submit 
    </button> 
    </form> 
</body> 
Смежные вопросы