CODEWITHSUNDEEP
javascriptangularjs
Rafael Ruiz Tabares
Rafael Ruiz Tabares

Reputation: 731

ng-option preselect value for (key,value) pair when value is an array of object

I can't do a pre-selection in ng-options from (key,value) pair when value is a array of objects, although if I use value.property then I can do the pre-selection.

I wrote an example in jsfiddle and I'm able to preselect ng-option by key or value.property but in my case I need the whole array

edit : I edit because [key,value] is [key,Array[Object]] instead of [key,Object]. And I add a new html select code to show right selection based on given answers.

be aware you must pass into ng-model whole set of arrays although the tracking just check array zero. Both structure should be identical.

Updated JSFiddel

HTML

<div ng-app="myApp" ng-controller="demoCtrl">
    <select name="first" ng-model="data" ng-options="key as value.templateId for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data}}</div>
    <br>
    <select name="second" ng-model="data2" ng-options="value.templateId as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data2}}</div>
    <br>
    <select name="third" ng-model="data3" ng-options="value as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is NOT preselected! = {{data3}}</div> :(

    <select name="forth" ng-model="data4" ng-options="key for (key, value) in                                
    options track by value[0].templateId">

      <option value="">Select template</option>
   </select>

<div>Solution! = {{data4}}</div>

Angular

var app = angular.module('myApp', []);

app.controller('demoCtrl', function($scope) {

    $scope.data = "for offer";
    $scope.data2 = "002";
    $scope.data3 = '{ templateId :"001" , color : "yellow"}';

   $scope.data = [
                   {"templateId":3,"color":"blue"},
                   {"templateId":4,"color":"dark blue"}
                 ];

   $scope.options =   {  
            "for offer": 
                 [
                   {"templateId":1,"color":"yellow"},
                   {"templateId":2,"color":"dark yellow"}
                 ],

           "no offer": 
                 [
                    {"templateId":3,"color":"blue"},
                    {"templateId":4,"color":"dark blue"}
                 ],

           "general": 
                 [
                    {"templateId":5,"color":"orange"},
                    {"templateId":6,"color":"dark orange"}
                 ]
        };
});

Upvotes: 0

Views: 471

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

In order to achieve this requirement you have to use track by in ng-select. The track by will help you in binding the select option with a value tag. You should also provide an Unique Id field to track the select option.

<select ng-model="data" ng-options="item.color for item in options  track by item.templateId">
</select>

In your controller the options object will be like this

$scope.options = [{ templateId :"001" , color : "yellow"}, 
                  { templateId :"002" , color : "red"} ,    
                  { templateId :"003" , color : "green"}];

In order to initialize the select option you can set the model by

$scope.data= $scope.options[0];

You can initialize the scope variable only if you use the track by property in select option. In your question the templateId is the unique id

Upvotes: 1

lenilsondc
lenilsondc

Reputation: 9800

When using ngOptions you can use track by to determine an unique identifier to bind value properly. Also, the value mustn't be a string, it have to be an object like so:

$scope.data3 = { templateId :"001" , color : "yellow"};

And your template:

<select name="third"
    ng-model="data3"
    ng-options="value as key for (key, value) in options track by value.templateId">
    <option value="">Select template</option>
</select>

Using track by value.templateId will tell ngOptions to look at the property value.templateId when testing the equality of the objects and determine selected value.

Updated your fiddle.

Upvotes: 2

Related Questions