Reputation: 689

ng-Model list is not updating in angular js

I am working on web app where user select 1st drop down list after selecting 1st drop down 2nd drop down load with data its depend on 1st drop down selection. If 2nd drop down list have one item then ng-model is updated but if 2nd drop down list have more than one item then ng-model not updated always show last item in ng-model.

i am attaching a Jsbin link

<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>

please guide me what is wrong with my code.

Upvotes: 0

Answers (2)

gaurav bhavsar

Reputation: 2043

You are using track by item.Dim, so your Dim must have a unique value. In your case Dim is the same for all, that's why you are getting last element in ng-Model.

Please check Working Plunkr

Upvotes: 0

Naghaveer R

Reputation: 2944

How about loading the default value on ng-change of the first dropdown

  $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>

NOTE: You have to remove track by Dim because it doesn't have unique value

Upvotes: 1

ng-Model list is not updating in angular js

Answers (2)

Related Questions