![](/img/trans.png)
[英]AngularJS select default value with ng-model and ng-repeat instead ng-option
[英]how to change ng-option value based on select ng-model value
我有這樣的查看代碼
<div ng-repeat="location in Locations">
<ng-form name="callForm">
<div class="clearfix">
<div class="col-xs-8">
<div class="col-xs-4">
<label style="margin-top:6px;">
{{pubs.publisher}}:
</label>
</div>
<div class="col-xs-8">
<select class="form-control" ng-model="location.call_result_id">
<option ng-repeat="Result in Results" value="{{Result.id}}">{{Result.label}}</option>
</select>
</div>
</div>
</div>
</ng-form>
<br>
</div>
我的位置數組有
$scope.Locations = [
{
"id": "1",
"p_id": 22,
"publisher": "Bing",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
},
{
"id": "2",
"p_id": 32,
"publisher": "Local",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
}
]
結果數組包含
$scope.results = [
{
"id": 1,
"label": "No Answer",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 2,
"label": "Busy",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 3,
"label": "Call",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 4,
"label": "Verification",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 5,
"label": "triggered",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 6,
"label": "Issue",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 7,
"label": "Support",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
},
{
"id": 8,
"label": "null",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}
]
現在我的問題是
當我的選擇框ng-model location.call_result_id變為1時,表示ng選項值Result.id變為1
意味着用戶在那一次我要更新所有ne-repeat的選擇框的第一個選項ng-model值變為1並且Result.id也變為1
這意味着如果用戶選擇第一個選項,則自動將所有選擇框都選擇為第一個選項
誰能告訴我該怎么做。
我希望這有幫助。
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="application.js"></script>
</head>
<body ng-app="demo" ng-controller="demoController">
<div ng-repeat="location in Locations">
<ng-form name="callForm">
<div class="clearfix">
<div class="col-xs-8">
<div class="col-xs-4">
<label style="margin-top:6px;">
{{selectedID}} {{location.publisher}}:
</label>
</div>
<div class="col-xs-8">
<select class="form-control" ng-model="call_result_id"
ng-options="r.id as r.label for r in results"
ng-change="setAllDropDowns(call_result_id)">
<option value="" disabled="">Select One</option>
</select>
</div>
</div>
</div>
</ng-form>
<br>
</div>
</body>
</html>
application.js文件應類似於:
angular.module('demo', [])
.controller('demoController', function($scope) {
$scope.Locations = [{
"id": "1",
"p_id": 22,
"publisher": "Bing",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
}, {
"id": "2",
"p_id": 32,
"publisher": "Local",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
}, {
"id": "3",
"p_id": 32,
"publisher": "new",
"status_id": 12,
"notes": "",
"callback_at": "",
"call_result_id": ""
}];
$scope.results = [{
"id": 1,
"label": "No Answer",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 2,
"label": "Busy",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 3,
"label": "Call",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 4,
"label": "Verification",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 5,
"label": "triggered",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 6,
"label": "Issue",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 7,
"label": "Support",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}, {
"id": 8,
"label": "null",
"created_at": "2015-04-03 11:13:47",
"updated_at": "2015-04-03 11:13:47"
}]
$scope.setAllDropDowns = function(inputId) {
$scope.call_result_id = inputId;
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.