模型窗口内的AngularJS范围
AngularJS scope inside model window
我有一个简单的控制器,它使用$http.get获取一些消息。然后我使用ng repeat在HTML中显示它。但由于某种原因,如果我试图从模型窗口访问它们,它就不起作用。它总是打印第一条消息。
index.html
<div ng-controller="MessageController as ctrl">
<ul class="list-group" ng-repeat="message in ctrl.messages">
<li class="list-group-item">
{{message.title}}
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
Edit
</button>
<div class="modal fade" id="myModal" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
{{message.title}}
<label>Title:</label><input ng-model="message.title"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
app.js
var app = angular.module('plunker', []);
var prefix = 'http://jsonplaceholder.typicode.com';
app.controller('MessageController', ['$http', function ($http) {
var $this = this;
$http.get(prefix + '/posts').success(function (response) {
$this.messages = response;
return response;
});
}]);
这是拔毛器http://plnkr.co/edit/ZKyZJV9aYD5AU6kmsMTC?p=preview
问题是,所有模式id="myModal"
都使用相同的id。因此,由于html上的搜索将在找到第一个巧合后完成,它将始终向您显示相同的模态。
使用变量id,例如,使用ng-repeat
中的$index
id="myModal_{{$index}}"
在两个div(id
和data-target
)上都执行此操作,应该可以正常工作。
这是有效的:
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal{{$index}}">
...
<div class="modal fade" id="myModal{{$index}}" aria-labelledby="myModalLabel">
http://plnkr.co/edit/vXbN1FwH4yjb66rLV5qn?p=preview
但在角度中,通过#id寻址任何内容都是非常糟糕的模式
相关文章:
- AngularJS:'$范围未定义'
- AngularJS范围没有更新
- AngularJS范围变量Unwatch
- 如何使用EnquireJS使AngularJS范围变量依赖于媒体查询
- AngularJS-范围差异
- AngularJS范围未定义
- AngularJS范围定义的函数为null
- AngularJS-范围错误:''之后超过了最大调用堆栈大小;应用程序启动
- AngularJS范围监视未触发
- 使用angularjs范围变量初始化javascript变量
- 将来自多个控制器的 AngularJS 范围对象合并到一个对象中
- angularJS范围在HTTP get之后不会更新
- 创建高图表点击功能时丢失了 Angularjs 范围
- 将javascript变量传递给angularjs范围
- 将 json 数组中的数组映射到 Angularjs 范围
- 从内部函数更改 AngularJS 范围变量
- jQuery中的AngularJS范围
- 在验证Symfony2中的搜索表单后更新AngularJS范围
- AngularJS 范围问题
- 在视图中简单呈现 AngularJS 范围数据