CODEWITHSUNDEEP
javascriptangularjs
kumara
kumara

Reputation: 937

drop down load according to selected value angular js

i need to load customer city, according to customer name. i am using below code to do it.

 $scope.dt = [];
let details = {
      "peopel": [{
           "Name": "Kamal",
           "City": "Trist",
           "Designation": "Designer",
           "Tasks":['Drawing','Sketch']
       }, {
          "Name": "James",
          "City": "Lissa",
          "Designation" : "Cleaner",
          "Tasks":['Washing','Sweeping']

       }]
 }

 details.peopel.forEach((obj, i) => {
 $scope.dt.push(obj);
console.log($scope.dt);

  });

customer names are loading correctly to the drop down. when it change customer city should change. but its not loading properly. please check my below code

<label>Customer Name</label>
<select ng-model="aa" ng-options="y.Name for y in dt">

</select>

<label>Customer City</label>
<select ng-model="Citya" ng-options="x for x in aa.City"> </select>
 {{aa.City}}

i printed that value in the page using "{{aa.City}}". its correct. but drop down loading with letter by letter.

Upvotes: 0

Views: 57

Answers (1)

MKR
MKR

Reputation: 36

You can use ng-selected and ng-option to achieve

Working code: https://codepen.io/krmuthu/pen/zYOBgmz

<label>Customer Name</label>
    <select ng-model="aa" ng-options="y.Name for y in dt">
    </select>
    <label>Customer City</label>
    <select ng-model="Citya"  >
      <option ng-repeat="y in dt" ng-selected="y.City == aa.City" ng-value="y.City">
        {{y.City}}
      </option>
    </select>
 {{aa.City}}

Upvotes: 1

Related Questions