为Angular-ui模式赋值
为Angular-ui模式赋值
提问于 2016-06-14 15:40:56
我认为我的代码中有一些很大的漏洞，因为当模式出现时，表中的内容(当您单击一行时会产生模式)不会填充模式中的输入框。我认为我正在以错误的方式处理这种情况，一些方向将是很棒的。
我的JS：
var app = angular.module('peopleInformation', ['ngAnimate','ui.bootstrap']);
app.controller('myCtrl', function($scope, $http, $uibModal) {
$http.get("Assignment005.json").success(function(response){
$scope.myData = response.People;
});
$scope.modify = function(currentData){
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller:function($scope, $uibModalInstance, details){
$scope.FirstName = details.FirstName;
$scope.LastName = details.LastName;
$scope.Age = details.Age;
$scope.Nickname = details.Nickname;
$scope.update = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'lg',
resolve: {
details: function() {
return currentData;
}
}
});
};
}); 我的模式：
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Your row of data</h4>
</div>
<div class="modal-body" name="modelData" style="height:200px">
<form class="form-horizontal pull-left form-width" role="form">
<div class="form-group">
<label class="control-label col-sm-4" for="first">First Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="first" ng-model="FirstName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="last">Last Name:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="last" ng-model="LastName">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="age">Age:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="age" ng-model="Age">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="nick">Nickname:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="nick" ng-model="Nickname">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success pull-right" data-dismiss="modal">Submit</button>
</div>
</div>主要HTML，以防需要：
<body>
<div data-ng-app="peopleInformation" data-ng-controller="myCtrl" class="jumbotron">
<div class="panel panel-default">
<div class="panel-heading">Essential Information</div>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Nickname</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">
<td>{{ details.FirstName }}</td>
<td>{{ details.LastName }}</td>
<td>{{ details.Age }}</td>
<td>{{ details.Nickname }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info pull-right" data-ng-click="new()">Add
</button>
</div>
</div>
<div ng-include="myModalContent.html"></div>
</div>
</body>我是一个使用Angular的新手，所以如果你能公开地简单地告诉我，这将有助于澄清事情，尽管再一次，任何帮助都是感激的。
回答 3
Stack Overflow用户
发布于 2016-06-14 16:28:47
Bellow是角度模态实例控制器
app.controller('ModalInstanceCtrl', function ($scope,
$uibModalInstance, item) {
$scope.customer = item;
$scope.yes = function () {
$uibModalInstance.close(); };
$scope.no = function () {
$uibModalInstance.dismiss('cancel');
};
});bellow是调用angular modal的代码
$scope.open = function (item) {
var modalInstance = $uibModal.open({
animation: true,
scope: $scope,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: 'md',
resolve: {
item: function () {
return item;
}
}
});
modalInstance.result.then(function (selectedItem) {
$log.info(selectedItem);
});
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};Bellow是模板的代码
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Re-calculate retail price</h3>
</div>
<div class="modal-body">
Margin percent of selected customer is <b>{{ customer.margin_percent }}</b> <br />
Do you want to recalculate the retail price?
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>Stack Overflow用户
发布于 2016-06-14 15:53:26
在您的HTML文件中，您正在向修改函数传递不同的参数，它应该等于ng-repeat指令中指定的参数。因此，在这种情况下：
<tr data-ng-repeat="data in myData" data-ng-click="modify(details)">将成为：
<tr data-ng-repeat="details in myData" data-ng-click="modify(details)">Stack Overflow用户
发布于 2016-06-14 16:17:12
实际上，我认为赋值的位置是错误的。我移动了：
$scope.FirstName = details.FirstName;在var modalInstance变量之外，它们现在正在填充输入框。如果这是混乱的或不标准的，那么让我知道，因为有时正确的结果并不总是正确的方法。感谢那些试图提供帮助的人，非常感谢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37805862
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号