Default value in angular js select from Server

Question

Here is the Scenario

I am getting Data from server in this form

$scope.data=[
{"name":"xyz","status":"pending"},
{"name":"abc","status":"completed"},
{"name":"pqr","status":"completed"}
]

This Data is Seprate GET call for different status

$scope.statusValues=[
{"statusName":"pending","id":"1"},
{"statusName":"completed","id":"2"},
{"statusName":"cancelled","id":"3"},
{"statusName":"custom","id":"4"}
]

In HTML:-

<div ng-repeat="t in data">{{t.name}}</div>

How to Display t.status value inside Select method with more $scope.statusValues

Use `ng-selected` match with `ng-model` like this................................ `` — srinivas.ln, Dec 05 '16 at 07:10

Weedoze · Answer 1 · 2016-12-05T08:23:22.627

1

You can use ng-options to display all the status and ng-model to bind to your data status

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.data = [{
    "name": "ABC",
    "statusId": "1",
    "status": "completed"
  }, {
    "name": "XYZ",
    "statusId": "2",
    "status": "pending"
  }, {
    "name": "PQR",
    "statusId": "3",
    "status": "assigned"
  }];

  $scope.statusValues = [{
    "statusId": "1",
    "status": "completed"
  }, {
    "statusId": "2",
    "status": "pending"
  }, {
    "statusId": "3",
    "status": "assigned"
  }, {
    "statusId": "4",
    "status": "cancelled"
  }, {
    "statusId": "5",
    "status": "customstatus"
  }, {
    "statusId": "6",
    "status": "customstatus2"
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="t in data">
    {{t.name}}
    <select ng-model="t.status" ng-options="s.status as s.status for s in statusValues"></select>
  </div>
</div>

EDIT

Update arrays as discussed in comments

edited Dec 05 '16 at 08:23

answered Dec 05 '16 at 07:15

Weedoze

13,683
1
33
63

Thank You fro Replying !! But still by default status value is not getting selected..as it is coming from server.. – Sanjay B Dec 05 '16 at 07:33
What is the default value ? – Weedoze Dec 05 '16 at 07:34
If you run the code snippet you can see that each dropdown has the value of the `status` inside the array `data`.. Thus the default value IS selected – Weedoze Dec 05 '16 at 07:38
Yes it will work ..as it is local data..in my case m getting data from server..??can u explain how should i approach. – Sanjay B Dec 05 '16 at 07:40
Use nested `then` function – Weedoze Dec 05 '16 at 07:42
Sorry didnt get your point ?can you give me a code snippet ?? – Sanjay B Dec 05 '16 at 07:44
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/129782/discussion-between-weedoze-and-sunny-coder). – Weedoze Dec 05 '16 at 07:48
Nice ! Dont forget to mark it as the answer or add your own answer if mine was wrong – Weedoze Dec 07 '16 at 07:06

score 1 · Answer 2 · answered Dec 05 '16 at 07:22

1

Use key value pair for combine them.

I have created plunker it may helpful.

Plunker

answered Dec 05 '16 at 07:22

Amee Prajapati

696
4
10

Thank You fro Replying !! But still by default status value is not getting selected..as it is coming from server.. – Sanjay B Dec 05 '16 at 07:34
I have created static replace it with server response. – Amee Prajapati Dec 05 '16 at 07:40
Exactly.Static data working fine..as soon as I do it with server GET call..it is not selecting default value {{t.status}} – Sanjay B Dec 05 '16 at 07:45

Default value in angular js select from Server

2 Answers2