2016-11-11 5 views
0

У меня есть следующий вид в моем угловом применении:не удается получить доступ к полю формы с помощью AngularJS

<form id="form1"> 
    <fieldset> 
     <input type="text" name="field1" ng-model="frm.myID" /> 
     <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="Process()" /> 
    </fieldset> 
</form> 

В моем контроллере у меня есть:

var frm = this; 

$scope.Process = function() { 
    console.log(frm.myID); 

} 

frm.myID приходит как неопределенный. Что мне не хватает?

+0

просьба представить ** все ** определения контроллера и HTML-блок, в том числе, где 'ng-controller' объявлен. – Claies

+0

это работает правильно, с ограниченной информацией, которую вы предоставили, до тех пор, пока один заполняет пробелы и делает некоторые предположения о остальной части недостающего кода: http://plnkr.co/edit/71Y2Tzj0hgmWg49g1vH6?p=preview. То, что вы не разместили в теле вопроса, не настроено должным образом, а остальная часть кода необходима для идентификации проблемы. – Claies

+0

в качестве примечания, если вы используете 'this', вы обычно не должны сохранять значения в' $ scope'. и если вы используете '$ scope', тогда' var frm = this' не нужно. Использование обоих синтаксисов в то же время приводит только к путанице. – Claies

ответ

0

Вы не используете объект, определенный на $ объеме. Проверьте приведенные ниже фрагменты кода.

Внутри вашего контроллера вы, кажется, смешиваете стили кодирования, например синтаксис синтаксиса $ scope или синтаксис контроллера, пожалуйста, перейдите с одним подходом.

Также, пожалуйста, инициализировать объект в пустой объект т.е. $scope.frm = {};

$ синтаксисе области видимости.

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 

 
DefaultController.$inject = ['$scope']; 
 

 
function DefaultController($scope) { 
 
    $scope.frm = {}; 
 

 
    $scope.Process = function() { 
 
    console.log($scope.frm.myID); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController"> 
 
    <form id="form1"> 
 
     <fieldset> 
 
     <input type="text" name="field1" ng-model="frm.myID" /> 
 
     <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="Process()" /> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</div>

контроллер наложения спектров синтаксиса. Вы можете использовать $ объем в этом синтаксисе тоже, но делать вещи, как создание наблюдателей, события и т.д.

angular 
 
    .module('demo', []) 
 
    .controller('DefaultController', DefaultController); 
 

 
function DefaultController() { 
 
    var vm = this; 
 
    vm.frm = {}; 
 
    vm.process = process; 
 

 
    function process() { 
 
    console.log(vm.frm.myID); 
 
    } 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as ctrl"> 
 
    <form id="form1"> 
 
     <fieldset> 
 
     <input type="text" name="field1" ng-model="ctrl.frm.myID" /> 
 
     <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="ctrl.process()" /> 
 
     </fieldset> 
 
    </form> 
 
    </div> 
 
</div>

+0

Я все еще получаю' $ scope.frm.myID' как undefined ... Может быть, потому, что страница является частичной страницей, загруженной другой страницей? – ElenaDBA

+0

Мне кажется, что вы используете контроллер в качестве синтаксиса. Не могли бы вы попробовать, например.фрагмент кода, который я дал с синтаксисом сглаживания контроллера, изначально он будет печатать undefined, просто введите текст и нажмите кнопку «Процесс» и проверьте –

1

Вы назначаете функцию контроллера frm переменной в коде контроллера, поэтому правильный console.log должен быть console.log(frm.frm.myId). Конечно, если вы не используете синтаксис controller as.

Обновление. Вам, вероятно, не нужно это делать. Поэтому попробуйте удалить этот var frm = this. И он будет работать с console.log console.log($scope.frm.id)

+1

, что было бы верно только в том случае, если 'frm == $ scope', что также не показано здесь. – Claies

+0

Да, хорошая точка. Думаю, тогда просто нет необходимости в 'var frm = this'. – k10der

0

myapp= angular.module("app",[]) 
 
     myapp.controller("yourControllerName",function($scope){ 
 
    var frm = this; 
 
    this.myID = ""; // ur missing 
 
    this.Process = function() { 
 
     
 
     console.log(frm.myID); 
 

 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="yourControllerName as frm"> 
 
<form id="form1"> 
 
    <fieldset> 
 
     <input type="text" name="field1" ng-model="frm.myID" /> 
 
     
 
     <input type="button" name="btnProcess" class="action-button" value="Process" ng-click="frm.Process()" /> 
 
    </fieldset> 
 
</form> 
 
</div>

+0

Я добавил 'frm.myID =" ";' перед моей функцией, и у меня уже был мой контроллер с синтаксисом 'as' в моем файле конфигурации, но теперь' console.log (frm.myID); 'подходит как пустой – ElenaDBA

+0

@ElenaDBA, пожалуйста, запустите и посмотрите, как он работает – Aravind

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