1

I would like to set the default item in a select menu based on value rather than by index position. For example, in the sample below, if one of the radio buttons in a form displays "Oranges," and a user selects that radio button, is it possible to make the default selection in the subsequent select menu be Oranges as well? Ideally, I would prefer not to rely on the order of items in the select menu. 

<input type="radio" ng-model="selectionList.message" value="{{selection.type}}">

<!--Default selection below should be based on value selected above, regardless of order-->

<select ng-model="editProject.project" ng-options="opt as opt.type for opt in editProject.options">
</select>

Is there a way to set the default based on value rather than the item's position in the select menu?

Ken
  • 3,091
  • 12
  • 42
  • 69

2 Answers2

1

Per radio input document, you can add a ng-change hook

<input type="radio"
   ng-model=""
   value=""
   [name=""]
   [ng-change=""]
   ng-value="">

like ng-change="editProject.project = selection.type"

Rebornix
  • 5,272
  • 1
  • 23
  • 26
  • Thank you, that makes sense. I must be doing something wrong, though, because I'm not able to get it to work. – Ken Feb 18 '15 at 04:51
1

Not completely sure what you ui is supposed to look like or waht the data structures you are pulling from look like. But in your ng-change it looks like you are using a value that is foreign to the dataStructure you are trying to manipulate. ie. using a array value to return a nested value in an object. see if the below works for the situation. I also did a plnkr.co that shows an example of it working as well. But here are the main snippets that 

<input type="radio" ng-model="color" 
       value="{{radioColors.type[1]}}"   
       ng-change="match()">Orange<br>

// the select element

  <select ng-model="selectValue" 
          ng-options="selectColor as selectColor.type for selectColor in selectColors"></select>

// this would go in your controller

$scope.match = function () {
    angular.forEach($scope.selectColors, function(value, key) {
      if(angular.equals(value.type, $scope.color)) {
        $scope.selectValue = $scope.selectColors[key]
      }

    });
}
jamie
  • 690
  • 7
  • 18
  • This is very helpful. Thank you. If one controller is handling the radio buttons and another controller is handling the select menu, could I use that function in a service and share it between two controllers? – Ken Feb 18 '15 at 22:08
  • 1
    Yep for sure. You would need to use the `$controller` service to 'inject' it into the other controller. Here is a recent stackoverflow question regarding [injecting another controllers scope.](http://stackoverflow.com/questions/25417162/how-do-i-inject-a-controller-into-another-controller-in-angularjs). Just need to follow the naming configuration pattern. – jamie Feb 18 '15 at 22:55
  • thanks again. So in this case, the controller for the radio buttons will be injected into the controller for the select menu? – Ken Feb 19 '15 at 00:28
  • I am going to play around with it a little. When I originally looked at the issue. I thought solution should really use directives. But in answering it - i thought to stay true to your current set up would be most clear. – jamie Feb 19 '15 at 06:16
  • @Ken here is my [directive solution](http://plnkr.co/edit/PILKqE4xmRXczhuxIiE5?p=preview). It is a much cleaner and on its way to being reusable components. Here is more reading if you are interested in the idea of approaching things from a component approach - which is the future of angular and web dev. [component based directives](https://www.airpair.com/angularjs/posts/component-based-angularjs-directives) – jamie Feb 22 '15 at 04:57
  • Thank you, this is very helpful! I also appreciate the link to the blog post on component directives. It's good to have a sense of where Angular is going. – Ken Feb 22 '15 at 22:02