есть проблема с 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
В чем проблема?
Вы никогда не объявляли newname
, вместо этого это свойство в $scope
<input type="text" ng-model="myAngular.newname" size="30">
Доступ к нему можно получить с помощью $scope.myAngular.newname
, а не newname
в вашем контроллере.
$scope.myNames.push({name: $scope.myAngular.newname});
Это связано с тем, что угловые хранят переменные, к которым HTML-доступ можно получить в области $scope
. Это объект, доступ к которому возможен в контроллере, что делает его уникальным.
Как наилучшая практика: 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: Я не могу добавлять комментарии, поэтому перечислены все лучшие практики в качестве отдельного ответа.
вы можете использовать
this.myAngular.newname
для получения значения текстового поля после отправки формы
Вы можете получить доступ к myAngular.newname
в контроллере:
$scope.myAngular.newname
Или другой вариант заключается в добавлении аргумента в addingName
:
$scope.addingName = function(newname){//ur code};
Затем измените HTML:
ng-submit="addingName(myAngular.newname)"
В вас html вы привязываете свой вход к модели под названием myAngular.newname
Но когда вы добавляете это значение в свой массив myNames, вы используете переменную newname
.
Вы можете изменить имя переменной в своем представлении или в своем контроллере. Это зависит от вас.
Один из вариантов решения проблемы:
<input type="text" ng-model="myAngular.newname" size="30"
placeholder="add new todo here">