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

Question

Please see my plunkr below

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

I've updated the question with the whole table so you can see the ng-repeat — aliaz
– aliaz, Commented Dec 15, 2016 at 3:30

Jithu Rajan · Accepted Answer · 2016-12-15 05:18:21Z

5

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

answered Dec 15, 2016 at 5:18

Jithu Rajan

4523 silver badges14 bronze badges

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

1 Comment

aliaz Over a year ago

thank you sir, you are a genius. this is exactly what I wanted.

Yaser · Accepted Answer · 2016-12-15 03:47:28Z

0

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.

answered Dec 15, 2016 at 3:47

Yaser

5,7391 gold badge18 silver badges28 bronze badges

Comments

Ravi Shankar Bharti · Accepted Answer · 2016-12-15 03:49:55Z

0

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>

edited Dec 15, 2016 at 3:49

answered Dec 15, 2016 at 3:42

Ravi Shankar Bharti

9,2786 gold badges31 silver badges53 bronze badges

2 Comments

aliaz Over a year ago

I have tried the alternative method but it only works if I remove the ng-model from the <select>. I want to keep the ng-model as I want to use ng-change as well. Unless there is another way to trigger a function call when the value here is changed.

Ravi Shankar Bharti Over a year ago

and the first method is not working ?? There is less chance of that working, but just clearing it out.

sayyed tabrez · Accepted Answer · 2018-12-01 10:14:30Z

0

<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

answered Dec 1, 2018 at 10:14

sayyed tabrez

1261 gold badge1 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related