Angularjs - переменная не найдена

0

есть проблема с Angular.js, которую я не могу исправить. Вот мой простой html:

<html ng-app="myAngularapp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="myangular.js"></script>
  </head>
  <body>
    <div ng-controller="myAngularCtrl">
<form ng-submit="addingName()">
        <input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
</div>
  </body>
  </html>

и myangular.js:

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        $scope.addingName = function(){
            $scope.myNames.push({name:newname});
        }
    });

Когда я нажимаю кнопку отправки, у меня есть ошибка:

Ошибка: не удается найти переменную: newname

В чем проблема?

  • 0
    Привет, что такое myAngular . Вы имеете в виду, чтобы представлять ваш контроллер?
Теги:

5 ответов

3
Лучший ответ

Вы никогда не объявляли newname, вместо этого это свойство в $scope

<input type="text" ng-model="myAngular.newname"  size="30">

Доступ к нему можно получить с помощью $scope.myAngular.newname, а не newname в вашем контроллере.

$scope.myNames.push({name: $scope.myAngular.newname});

Это связано с тем, что угловые хранят переменные, к которым HTML-доступ можно получить в области $scope. Это объект, доступ к которому возможен в контроллере, что делает его уникальным.

Поделиться
0

Как наилучшая практика: ViewModel должен быть четко определен.

Всегда используйте синтаксис Controller As и избегайте $ scope.

<form ng-submit="addingName()">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

Когда вы используете myAngular.newname, он должен быть объявлен на виртуальной myAngular.newname ($scope в вашем случае). и передать параметр addingName функции addingName

Итак, ваш JS будет:

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        //or you may use without myAngular
        //$scope.newname = "";
        //in this case you will have to use: ng-model="newname"
        //                        instead of ng-model="myAngular.newname"
        $scope.myAngular = {
            newname: ""
        };

        $scope.addingName = addName;

        //you can use addName function even to add names from JS itself also
        function addName(name){
            $scope.myNames.push({name});
        }
    });

и вид будет выглядеть следующим образом:

<form ng-submit="addingName(myAngular.newname)">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

PS: Я не могу добавлять комментарии, поэтому перечислены все лучшие практики в качестве отдельного ответа.

Поделиться
0

вы можете использовать

this.myAngular.newname

для получения значения текстового поля после отправки формы

http://plnkr.co/edit/6P5LXuuTAfUfQS4RxmWG?p=preview

Поделиться
  • 0
    Пожалуйста, поместите полный код здесь, в Переполнение стека, с объяснением того, почему и как код работает. Если вы вставите ссылку, которая перестает работать в будущем, тогда ваш ответ потерян, также очень полезно не переходить на отдельную страницу. И, просто ответы на кормление ложкой никогда никому не помогают - вы должны объяснить, как код, который вы дали, решает проблему. Спасибо!
0

Вы можете получить доступ к myAngular.newname в контроллере:

$scope.myAngular.newname

Или другой вариант заключается в добавлении аргумента в addingName:

$scope.addingName = function(newname){//ur code};

Затем измените HTML:

ng-submit="addingName(myAngular.newname)"
Поделиться
0

В вас html вы привязываете свой вход к модели под названием myAngular.newname Но когда вы добавляете это значение в свой массив myNames, вы используете переменную newname.

Вы можете изменить имя переменной в своем представлении или в своем контроллере. Это зависит от вас.

Один из вариантов решения проблемы:

<input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню