CODEWITHSUNDEEP
angularjs
shresthaal
shresthaal

Reputation: 685

Initial value of ng-model is not selected in select

When the page loads I want the select option to select the value set for the ng-model. Right now, it does not. When I change the value in the input box it does change the dropdown value too.

http://plnkr.co/edit/wOXkmXpLUCkzL5EYuP0W?p=preview

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example94-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>



</head>
<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.cars = [
        'Honda','Tesla','BMW','Toyota'
      ];
      $scope.myObj = {
        myColor:'13',
        myCat:'Tesla'
      };

      $scope.GetColorByCar=function(){
        if($scope.myObj.myCat === 'Honda'){
          $scope.colorsByCar = [
        {name:'black', id:11,bt:'Honda'},
        {name:'white', id:12,bt:'Honda'}];
        } else {
          $scope.colorsByCar = [
            {name:'xyz black', id:11,bt:'Tesla'},
            {name:'red', id:201,bt:'Tesla'},
            {name:'blue', id:301,bt:'Tesla'},
            {name:'yellow', id:411,bt:'BMW'}
            ];
        }
      };

    }]);
  </script>
  <div ng-controller="ExampleController">
    <input ng-model="myObj.myCat">
    <input ng-model="myObj.myColor"><br>
    Cars:
    <select ng-model="myObj.myCat" ng-click="GetColorByCar()">
      <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
    </select><br>
    Colors:
    <select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
    Currently selected: {{myObj.myCat}}
    Currently selected: {{myObj.myColor}}
  </div>
</body>
</html>

Upvotes: 0

Views: 105

Answers (2)

RSquared
RSquared

Reputation: 1188

You need to do a few of things for this to work

Change the select to use ngOptions

<select ng-model="myObj.myCat" ng-options="car for car in cars" ng-click="GetColorByCar()"></select>

Then myObj.myCat needs to reference the cars array

$scope.myObj = {
    myColor: '201',
    myCat: $scope.cars[1]
};

Lastly you will need to watch for changes on myObj.myCat and run the code when it changes

$scope.$watch('myObj.myCat', function() {
    ...
}

Here is the update plunker: http://plnkr.co/edit/Gl7vcBp4MpAJgtycQLUn?p=preview

Upvotes: 2

Josep
Josep

Reputation: 13071

I've fixed your code, use the $watch function for these kind of things. Like this:

Example

<body ng-app="selectExample">
    <script>
  angular.module('selectExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      
      $scope.cars = [
        'Honda','Tesla','BMW','Toyota'
      ];
      $scope.myObj = {
        myColor:'13',
        myCat:'Tesla'
      };

      $scope.$watch('myObj.myCat', function(newVal){
        if(newVal === 'Honda'){
          $scope.colorsByCar= [
            {name:'black', id:11,bt:'Honda'},
            {name:'white', id:12,bt:'Honda'}];
        } else {
          $scope.colorsByCar= [
            {name:'xyz black', id:11,bt:'Tesla'},
            {name:'red', id:201,bt:'Tesla'},
            {name:'blue', id:301,bt:'Tesla'},
            {name:'yellow', id:411,bt:'BMW'}
            ];
        }
      });
      
    }]);
  </script>
  <div ng-controller="ExampleController">
    <input ng-model="myObj.myCat">
    <input ng-model="myObj.myColor"><br>
    Cars:
    <select ng-model="myObj.myCat">
      <option ng-repeat="car in cars" value="{{car}}">{{car}}</option>
    </select><br>
    Colors:
    <select ng-model="myObj.myColor" ng-options="color.id as color.name for color in colorsByCar"></select><br>
    Currently selected: {{myObj.myCat}}
    Currently selected: {{myObj.myColor}}
  </div>
</body>

Upvotes: 1

Related Questions