bind textbox to selectlist

Question

Here is my Demo .
i want to bind textbox to selectlist , i mean when i wrote vahid the value change to vahid in selectlist .

 $scope.options2 = [{
    name: 'omid',
    value: 'something-about-ali'
  }, {
    name: 'vahid',
    value: 'something-about-vahid'
  }];  


 $scope.$watch('parentText.sms', function(v) {
    for (var i in $scope.options2) {
      var option = $scope.options2[i];
      if (option.name === v) {
        $scope.selectedName = option;
        break;
      }
    }
  });

Now it's Ok, it works perfectly .

The question is : in our application we have like **15 textbox and selectlist** like this , and i think $watch makes application too heavy .

Is there any trick or possiblity to do this in better way ?

Thanks

Answer 1

I think as mentioned in the other answer ng-change is the way to go.

You could also improve your function for finding the option with the use of ngFilter so you don't have to write a for loop.

Please have a look at your updated demo below or in this plunkr.

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

app.controller('MainCtrl', function($scope, $filter)  {
$scope.parentText = {};  
  $scope.options = [{
    name: 'a',
    value: 'something-cool-value'
  }, {
    name: 'b',
    value: 'something-else-value'
  }];


 $scope.options2 = [{
    name: 'omid',
    value: 'something-about-ali'
  }, {
    name: 'vahid',
    value: 'something-about-vahid'
  }];


  $scope.selectedOption = $scope.options[0];
  $scope.selectedName = $scope.options2[0];

  $scope.checkInput = function(text, dataArray, selectType) {
    var filtered = $filter('filter')(dataArray, {name: text});
    
    console.log(text);
    console.log(filtered, selectType);
    $scope[selectType] = filtered.length == 1? filtered[0]: $scope[selectType];
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <input type="text" ng-model="parentText.text" ng-change="checkInput(parentText.text, options, 'selectedOption')"/>
  <select ng-model="selectedOption" 
  ng-options="option.name for option in options">
  </select>
  {{ selectedOption.value }}
  
  
  <hr>
  <input type="text" ng-model="parentText.sms" ng-change="checkInput(parentText.sms, options2, 'selectedName')" />
  <select ng-model="selectedName"
  ng-options="option.name for option in options2">
  </select>
  {{ selectedName.value }}
</div>

Answer 2

First of all

You can find here both are not same.

They are not the same, clearly. One is used solely in the controller; the other is a directive on an input element.

But even in their application they differ.

When you use $watch the watched expression will be evaluated on every digest cycle, and if there is a change, the handler is invoked.

With ng-change, the handler is invoked explicitly in response to an event.

With $watch, change can come from anywhere: user action, controller function, service - all will trigger the handler.

With ng-change, the change is restricted to a user action on a particular input element.

It is worth to note also that ng-change works only in combination with ng-model - in other words, the ng-change expression is evaluated only when ngModel.$viewValue (refer to ngModelController documentation for more info) is changed, which typically happens in response to a user-initiated event.

Second :

I don't think so you have to write 15 function just use one generic function like this

1st time call ng-change="triggerEvt('selectType1',value1)" ng-model="value1"

2nd time call ng-change="triggerEvt('selectType2',value2)" ng-model="value2"

where in case of select write code like this

1st select box <select ng-model="temp['selectType1']"></select>

2nd select box <select ng-model="temp['selectType2']"></select>

in case of controller write function like this

$scope.triggerEvt = function(type, value){
   $scope.temp[type] = value;
}

PS name of the variables are for just example.Hope this helps.