控制器内部无法访问Angular js输入模型
Angular js input models not accessible inside controller
我使用这段代码来查看和添加数组中的人员。
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
add.html
<h1>Add</h1>
<input type="text" ng-model="new_name" placeholder="Name">
<br />
<input type="text" ng-model="new_age" placeholder="Age">
<br />
<button ng-click="add()">Add</button>
<hr />
<a href="#/">Back</a>
controller.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
});
});
app.controller('Ctrl', function($scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
问题是,我没有将数据从ng-model="new_name"
获取到控制器方法$scope.add = function()
中。按下添加按钮后,只有空白字符串被推入数组。然而,模型和控制器在没有路由和ng视图指令的情况下完美工作。我认为它的范围相关的问题。有人能帮我吗。谢谢
因为您应该为每个视图指定控制器。所以试着这样做:
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html',
controller: 'Ctrl'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
更好的解决方案是为每个视图提供一个单独的控制器。另外,请查看$routeProvider文档。
只需从index.html中删除<div ng-controller="Ctrl">
,并为您的路线添加一个控制器属性。
控制器.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'list.html'
})
.when('/add',{
templateUrl: 'add.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($location,$scope) {
$scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
$scope.add = function(){
$scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
$location.path("/");
};
});
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<body>
<h1>People</h1>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
</body>
</html>
首先,您必须使用具有name=''
属性的<form>
标记包装输入。下一步是为每个<input>
标签指定name=''
属性。外观:
<form name='myLoginForm'>
<input name='nick' ng-model='loginFormModel.nick'>
<input name='password' ng-model='loginFormModel.password'>
</form>
控制器内:
app.controller('Ctrl', function($location,$scope) {
$scope.loginFormModel = {}; //now you have whole values from view in this variable, for example nick is available in $scope.loginFormModel.nick
});
相关文章:
- Node.js输入数据事件停止
- 控制器内部无法访问Angular js输入模型
- 使用复选框和js输入文本
- 停止jQuery表单验证重置由其他JavaScript填充的typeahead.js输入字段
- 如何创建隐藏'payment_method_nonce'由brainstree.js输入
- 对挖空.JS输入值进行后处理
- 使用 Google 地方信息自动完成功能提交 JS 输入
- jQuery/JS 输入验证
- 使用带有 JS 输入的标头下载文件
- knockout.js输入框事件更改-传递旧值
- 动态添加Spring MVC JSP表单:使用JS输入,给出绑定错误
- 不;t处理本地js输入的点击事件
- 将Jasmine与Angular JS输入验证结合使用
- 如何通过模型属性设置余烬.js输入名称
- PDF.js -输入错误密码时的回呼问题
- Update Uniform.js输入不工作
- 记住 HTML 中 x 分钟的 JS 输入
- D3.js输入/update/exit没有按预期添加元素
- 如何将JS输入表单中的数据存储到文本中
- js输入类型日期数据绑定在谷歌Chrome