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................................ <select ng-model="status.statusname"> <option ng-repeat="t in data" title="{{t.title}}" ng-selected="{{t.statusname== status.statusname}}" value="{{t.statusname}}">{{t.statusname}}</option> </select> — srinivas.ln
– srinivas.ln, Commented Dec 5, 2016 at 7:10

Amee Prajapati · Accepted Answer · 2016-12-05 07:22:56Z

1

Use key value pair for combine them.

I have created plunker it may helpful.

Plunker

answered Dec 5, 2016 at 7:22

Amee Prajapati

6964 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sanjay B Over a year ago

Thank You fro Replying !! But still by default status value is not getting selected..as it is coming from server..

Amee Prajapati Over a year ago

I have created static replace it with server response.

Sanjay B Over a year ago

Exactly.Static data working fine..as soon as I do it with server GET call..it is not selecting default value {{t.status}}

Weedoze · Accepted Answer · 2016-12-05 08:23:22Z

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 5, 2016 at 8:23

answered Dec 5, 2016 at 7:15

Weedoze

14k2 gold badges38 silver badges65 bronze badges

8 Comments

Sanjay B Over a year ago

Thank You fro Replying !! But still by default status value is not getting selected..as it is coming from server..

Weedoze Over a year ago

What is the default value ?

Weedoze Over a year ago

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

Sanjay B Over a year ago

Yes it will work ..as it is local data..in my case m getting data from server..??can u explain how should i approach.

Weedoze Over a year ago

Use nested then function

|

Collectives™ on Stack Overflow

Default value in angular js select from Server

2 Answers 2

3 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related