javascript – AngularJS无法从bootstrap模式窗口传递$index
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – AngularJS无法从bootstrap模式窗口传递$index，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5139字，纯文字阅读大概需要8分钟。
内容图文
我正在这里撞墙.我正在使用ng-repeat来填充表格.在每行内部,我有2个按钮,一个用于更新行内容和上传文件.上传按钮打开一个引导模式窗口,用户在该窗口中选择文件并单击提交.
提交按钮使用ng-click运行一个使用$index作为参数的函数.但无论选择哪一行,$index值始终相同.
我不明白的是我在更新按钮上使用完全相同的语法(虽然在模态窗口之外),这很好用.
HTML：
<tr ng-repeat="item in items | filter:search " ng-class="{'selected':$index == selectedRow}" ng-click="setClickedRow($index)">
<td>{{$index}}</td>
<td ng-hide="idHidden" ng-bind="item.Id"></td>
<td ng-hide="titleHidden">
<span data-ng-hide="editMode">{{item.Title}}</span>
<input type="text" data-ng-show="editMode" data-ng-model="item.Title" data-ng-required />
<td>
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" data-toggle="modal" data-target="#uploadModal">Upload file <i class="fa fa-cloud-upload"></i></button>
<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button type="button" data-ng-hide="editMode" data-ng-click="editMode = true;" class="btn btn-default pull-right">Edit <i class="fa fa-pencil-square-o"></i></button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; updateItem($index)" class="btn btn-default">Save</button>
<button type="button" data-ng-show="editMode" data-ng-click="editMode = false; cancel()" class="btn btn-default">Cancel</button>
</td>`
JS：
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
因此,由ng-click触发的函数uploadAttachment($index,type)不会传递正确的索引号.无论点击哪一行,它总是传递相同的.
我省略了一些无关的代码.如果需要,我可以提供整件事.
对我遗失的任何建议？
编辑：
我试图实施DonJuwe的建议.
我在控制器中添加了这个：
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'www.test.xxx/App/uploadModal.html',
controller: 'riskListCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
这是我的模态模板：
<div class="modal-header">
<h3 class="modal-title" id="uploadModalLabel">Options</h3>
</div>
<div class="modal-body">
<h4>Upload Documents</h4>
<form>
<div class="form-group">
<select data-ng-model="type" class="form-control" id="fileTypeSelect">
<option value="Policy">Policy</option>
<option value="SOP">SOP</option>
</select>
<br>
<div class="input-group"> <span class="input-group-btn">
<input type="file" id="file">
</span>
</div>
<br>
<button type="button" class="btn btn-default" data-ng-click="uploadAttachment($index, type)">Upload</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
最后我的函数驻留在RiskListCtrl(我使用的唯一控制器)中：
$scope.uploadAttachment = function executeUploadAttachment(index, type) {
var listname = "Risk Register";
var id = $scope.items[index].Id;
console.log(indexID);
readFile("uploadControlId").done(function(buffer, fileName) {
uploadAttachment(type, id, listname, fileName, buffer).done(function() {
alert("success");
}).fail(function() {
alert("error in uploading attachment");
})
}).fail(function(err) {
alert("error in reading file content");
});
}
好像$scope.items [index] .Id是空的.错误：无法读取未定义的属性“Id”
解决方法:
模态窗口有自己的范围.这意味着您需要解析要传递到模态范围的数据.为此,请在modals open(options)方法中使用resolve.
在我给你举个例子之前,我想建议你的所有表项只有一个模态.这将让您保留一个模板,您可以轻松使用id(现在,您为每个无效的表项创建模板).只需调用控制器函数并传递$index：
<button type="button" class="btn btn-primary uploadBtn" data-ng-show="editMode" ng-click="openModal($index)">Upload file <i class="fa fa-cloud-upload"></i></button>
在控制器中,创建模态实例并引用模板：
$scope.openModal = function(index) {
var modalInstance = $modal.open({
templateUrl: 'myPath/myTemplate.html',
controller: 'MyModalCtrl',
resolve: {
index: function() {
return index;
}
}
});
};
现在,您可以通过注入索引来访问MyModalCtrl范围中的索引：
angular.module('myModule', []).controller('MyModalCtrl', function($scope, index) {
$scope.index = index;
});
内容总结
以上是互联网集市为您收集整理的javascript – AngularJS无法从bootstrap模式窗口传递$index全部内容，希望文章能够帮你解决javascript – AngularJS无法从bootstrap模式窗口传递$index所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。