ng-Model 列表未在 angular js 中更新
[英]ng-Model list is not updating in angular js
問題描述
我正在開發網絡應用程序，其中用戶在選擇第一個下拉列表后選擇第一個下拉列表第二個下拉加載數據取決於第一個下拉選擇。 如果第二個下拉列表有一個項目，則 ng-model 會更新，但如果第二個下拉列表有多個項目，則 ng-model 未更新始終顯示 ng-model 中的最后一個項目。
我附上一個Jsbin 鏈接
<body ng-app="starter">
<div ng-controller="MyCtrl">
<div> Map Type<select ng-model="Map.TypeSel" ng-options="item as item.Name for item in Map.Types track by item.Id" ng-init="Map.TypeSel=Map.Types[0]"></select></div>
<div>Commodity<select ng-model="Map.MapSel" ng-options="item as item.Metal for item in Map.Cord[Map.TypeSel.Code] track by item.Dim" ng-init="Map.MapSel=Map.Cord[Map.TypeSel.Code][0]" ng-change="loadMap()"></div>
</div>
<script>
var app=angular.module('starter', []);
app.controller('MyCtrl', function ($scope) {
$scope.Map = [];
$scope.Map.Cord = [];
$scope.Map.Types = [{ Name: "Geology", Id: 0, Code: "Geo" }, { Name: "Metallic", Id: 1, Code: "Met" }, { Name: "Non Metallic", Id: 2, Code: "Non" }, { Name: "Rare Earth", Id: 3, Code: "Ear" }, { Name: "Metallic & Non Metallic", Id: 4, Code: "MNe" }];
$scope.Map.Cord.Geo = [{ "Metal": "Geology Of Oman", "Dim": "2481,3509", "Path": "img/M/GEOLOGY_OF_OMAN.jpg" }];
$scope.Map.Cord.Met = [{ "Metal": "CHROMITE", "Dim": "2481,3509", "Path": "img/M/Metallic/CHROMITE(M).jpg" }, { "Metal": "COPPER", "Dim": "2481,3509","Path":"img/M/Metallic/COPPER(M).jpg" }, { "Metal": "GOLD", "Dim": "2481,3509","Path":"img/M/Metallic/GOLD(M).jpg" }, { "Metal": "IRON", "Dim": "2481,3509","Path":"img/M/Metallic/IRON(M).jpg" }];
$scope.Map.Cord.Non = [{ "Metal": "ASBESTOS", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ASBESTOS(NM).jpg" }, { "Metal": "BARITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/BARITE(NM).jpg" }, { "Metal": "CLAY", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/CLAY(NM).jpg" }, { "Metal": "GYPSUM", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/GYPSUM(NM).jpg" }, { "Metal": "KAOLIN", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/KAOLIN(NM).jpg" }, { "Metal": "LATERITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LATERITE(NM).jpg" }, { "Metal": "LEAD", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LEAD(NM).jpg" }, { "Metal": "LIMESTONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LIMESTONE(NM).jpg" }, { "Metal": "ORNAMENTAL STONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ORNAMENTAL_STONE(NM).jpg" }, { "Metal": "PHOSPHATE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PHOSPHATE(NM).jpg" }, { "Metal": "PYRITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PYRITE(NM).jpg" }, { "Metal": "SILICA", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/SILICA(NM).jpg" }];
$scope.Map.Cord.Ear = [{ "Metal": "STRONTIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/STRONTIUM(RE).jpg" }, { "Metal": "URANIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/URANIUM(RE).jpg" }];
$scope.Map.Cord.MNe = [{ "Metal": "Metalic & Non Metalic", "Dim": "2481,3509", "Path": "img/M/M&NM.jpg" }];
$scope.loadMap = function () {
console.log($scope.Map.MapSel);
}
});
</script>
請指導我我的代碼有什么問題。
2 個解決方案
解決方案1
1 2016-12-27 07:23:43
如何在第一個下拉列表的ng-change上加載默認值
$scope.loadDefaultValue = function() {
$scope.Map.TypeSel = $scope.Map.Types[0];
$scope.Map.MapSel = $scope.Map.Cord[$scope.Map.TypeSel.Code][0];
}
$scope.loadSecondDefault = function(typeSel) {
$scope.Map.MapSel = $scope.Map.Cord[typeSel.Code][0];
}
var app = angular.module('starter', []); app.controller('MyCtrl', function($scope) { $scope.Map = []; $scope.Map.Cord = []; $scope.Map.Types = [{ Name: "Geology", Id: 0, Code: "Geo" }, { Name: "Metallic", Id: 1, Code: "Met" }, { Name: "Non Metallic", Id: 2, Code: "Non" }, { Name: "Rare Earth", Id: 3, Code: "Ear" }, { Name: "Metallic & Non Metallic", Id: 4, Code: "MNe" }]; $scope.Map.Cord.Geo = [{ "Metal": "Geology Of Oman", "Dim": "2481,3509", "Path": "img/M/GEOLOGY_OF_OMAN.jpg" }]; $scope.Map.Cord.Met = [{ "Metal": "CHROMITE", "Dim": "2481,3509", "Path": "img/M/Metallic/CHROMITE(M).jpg" }, { "Metal": "COPPER", "Dim": "2481,3509", "Path": "img/M/Metallic/COPPER(M).jpg" }, { "Metal": "GOLD", "Dim": "2481,3509", "Path": "img/M/Metallic/GOLD(M).jpg" }, { "Metal": "IRON", "Dim": "2481,3509", "Path": "img/M/Metallic/IRON(M).jpg" }]; $scope.Map.Cord.Non = [{ "Metal": "ASBESTOS", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ASBESTOS(NM).jpg" }, { "Metal": "BARITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/BARITE(NM).jpg" }, { "Metal": "CLAY", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/CLAY(NM).jpg" }, { "Metal": "GYPSUM", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/GYPSUM(NM).jpg" }, { "Metal": "KAOLIN", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/KAOLIN(NM).jpg" }, { "Metal": "LATERITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LATERITE(NM).jpg" }, { "Metal": "LEAD", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LEAD(NM).jpg" }, { "Metal": "LIMESTONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/LIMESTONE(NM).jpg" }, { "Metal": "ORNAMENTAL STONE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/ORNAMENTAL_STONE(NM).jpg" }, { "Metal": "PHOSPHATE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PHOSPHATE(NM).jpg" }, { "Metal": "PYRITE", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/PYRITE(NM).jpg" }, { "Metal": "SILICA", "Dim": "2481,3509", "Path": "img/M/NON_Metallic/SILICA(NM).jpg" }]; $scope.Map.Cord.Ear = [{ "Metal": "STRONTIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/STRONTIUM(RE).jpg" }, { "Metal": "URANIUM", "Dim": "2481,3509", "Path": "img/M/RARE_Earth/URANIUM(RE).jpg" }]; $scope.Map.Cord.MNe = [{ "Metal": "Metalic & Non Metalic", "Dim": "2481,3509", "Path": "img/M/M&NM.jpg" }]; $scope.loadMap = function() { console.log($scope.Map.MapSel); } $scope.loadDefaultValue = function() { $scope.Map.TypeSel = $scope.Map.Types[0]; $scope.Map.MapSel = $scope.Map.Cord[$scope.Map.TypeSel.Code][0]; } $scope.loadSecondDefault = function(typeSel) { $scope.Map.MapSel = $scope.Map.Cord[typeSel.Code][0]; } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="starter" ng-controller="MyCtrl"> <div> <label>TYPE:{{Map.TypeSel}}</label> <br> <label>MAP:{{Map.MapSel}}</label> </div> <div>Map Type <select ng-model="Map.TypeSel" ng-options="item as item.Name for item in Map.Types track by item.Id" ng-init="loadDefaultValue()" ng-change="loadSecondDefault(Map.TypeSel)"></select> </div> <div>Commodity <select ng-model="Map.MapSel" ng-options="item as item.Metal for item in Map.Cord[Map.TypeSel.Code]" ng-change="loadMap()"> </div> </div>
注意：您必須通過 Dim 刪除軌道，因為它沒有唯一值
解決方案2
0 已采納 2016-12-27 07:14:19
您正在使用track by item.Dim ，因此您的 Dim 必須具有唯一值。 在你的情況下， Dim 對所有人都是一樣的，這就是為什么你在ng-Model中獲得最后一個元素。
請檢查工作Plunkr
ng-model值未在控制器中更新：Angular js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.