CODEWITHSUNDEEP
javascriptangularjs
aliaz
aliaz

Reputation: 787

AngularJS - set selected value in dropdown list where value matches with another object

Please see my plunkr below

https://plnkr.co/edit/8xjmL9?p=preview

This what my $scope.data looks like

$scope.data = [  
   {  
      "projectedStart":"2016-12-14T00:00:00"     
   },
   {  
      "projectedStart":"2017-01-04T00:00:00"      
   },
   {  
      "projectedStart":"2017-01-11T00:00:00"      
   }   
];

This is what my scope.possibleDates look like

$scope.possibleDates = [  
   {  
      "projectedStartDate":"2016-12-07T00:00:00",
      "dateName":"December - Week 1"
   },
   {  
      "projectedStartDate":"2016-12-14T00:00:00",
      "dateName":"December - Week 2"
   },
   {  
      "projectedStartDate":"2016-12-21T00:00:00",
      "dateName":"December - Week 3"
   },
   {  
      "projectedStartDate":"2016-12-28T00:00:00",
      "dateName":"December - Week 4"
   },
   {  
      "projectedStartDate":"2017-01-04T00:00:00",
      "dateName":"January - Week 1 (20/10)"
   },
   {  
      "projectedStartDate":"2017-01-11T00:00:00",
      "dateName":"January - Week 2 (20/10)"
   }
]

This is what my select looks like which is obviously wrong

<table class="table table-bordered table-hover">
   <thead>                  
      <tr>
        <th >Projected Date</th>
     </tr>
   </thead>
    <tbody>
        <tr ng-repeat="d in data">
            <td>
                <select class="form-control"
                            ng-model="selectedValue"
                            ng-init="selectedValue = {{data.projectedStart == dates.projectedStartDate}}"
                            ng-options="dates.dateName for dates in possibleDates">
                 </select>
            </td>
        </tr>                                               
    </tbody>
</table>

I am trying to display a dropdown with a list of all the $scope.possibleDates's dateName property which is fine, but I want to have selected the value that matches with the 'projectedStart' in $scope.Data

Upvotes: 2

Views: 7087

Answers (4)

sayyed tabrez
sayyed tabrez

Reputation: 126

<select class="form-control agentValue" style="padding: unset;" ng-model="selectedAgent[$index]" ng-change="setAgentID($index)">
    <option value="">Select Agent</option>
    <option ng-repeat="aList in agentlist" value="{{aList.LOGIN_ID}}">{{aList.FIRST_NAME}} {{aList.LAST_NAME}}</option>
</select>

this is the html code i have written (above is html)

for(var i= 0; i< $scope.datalist.length; i++){
    $scope.selectedAgent[i] = $scope.datalist[i].COLLECTION_AGENT_ID;
}

this my controller code this works fine for me

Upvotes: 0

Jithu Rajan
Jithu Rajan

Reputation: 452

I dont think there is a need for defining a new model using ng-init and the way of usage is also wrong. You need to bind model which you want to update through the field. In this case it is projectedStart property of data array. So set that as your drop-down model. Now you need to set ng-option such that when dateName is selected, projectedStart property should go as value. The following code will be a good option for you.

<select class="form-control"
                        ng-model="d.projectedStart"
                        ng-options="dates.projectedStartDate as dates.dateName for dates in possibleDates">
                  </select>

I have updated the plunker - https://plnkr.co/edit/Hd2UBec1ULK6XQ2H26hC?p=preview

Upvotes: 5

Ravi Shankar Bharti
Ravi Shankar Bharti

Reputation: 9268

I dont think you need to put {{}} inside ng-init expression. Also, you need to use d instead of data, as you have defined d in data in ng-repeat statement

Just try this : 

ng-init = "selectedValue = (d.projectedStart == dates.projectedStartDate)"

I guess this will work for you.

Alternative :

you can try this in place of your select statement.

<select class="form-control" ng-model="selectedValue">
    <option ng-repeat="dates in possibleDates" ng-selected = "d.projectedStart == dates.projectedStartDate">dates.dateName</option>
</select>

Upvotes: 0

Yaser
Yaser

Reputation: 5719

Just change your code to this:

<select class="form-control"
      ng-model="selectedValue">
  <option ng-repeat="dates in possibleDates" selected="{{d.projectedStart == dates.projectedStartDate}}">{{dates.dateName}}</option>
</select>

You don't need {{}} inside your ng-init since it is evaluated by Angular itself.

Also for an item to be selected you need to set the value to one of the dates, your evaluation sets the selectedValue to true or false.

Upvotes: 0

Related Questions