将文本框绑定到选择列表

Question

这是我的Demo。
我想将文本框绑定到选择列表，我的意思是当我写 vahid 时，选择列表中的值更改为 vahid。

 $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;
      }
    }
  });

现在好了，完美运行。

问题是：在我们的应用程序中，我们有像这样的**15 textbox and selectlist**，我认为 $watch 使应用程序过于繁重。

是否有任何技巧或可能性以更好的方式做到这一点？

谢谢

Answer 1

我认为正如另一个答案中提到的ng-change 是要走的路。

您还可以使用 ngFilter 改进查找选项的功能，这样您就不必编写 for 循环。

请查看下方或此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

首先

你可以发现here两者都不一样。

显然，它们不一样。一个是单独在控制器中使用的；另一个是输入元素的指令。

但即使在他们的应用程序中，它们也不同。

当您使用$watch 时，将在每个摘要周期评估被监视的表达式，如果有变化，则调用处理程序。

使用ng-change，处理程序被显式调用以响应事件。

使用$watch，更改可以来自任何地方：用户操作、控制器功能、服务 - 都将触发处理程序。

使用ng-change，更改仅限于用户对特定输入元素的操作。

值得注意的是，ng-change 只能与ng-model 结合使用——换句话说，ng-change 表达式仅在ngModel.$viewValue（有关更多信息，请参阅 ngModelController 文档）更改时进行评估，这通常是为了响应用户发起的事件而发生的。

第二：

我不认为你必须编写 15 个函数，只需使用一个像这样的通用函数

第一次拨打ng-change="triggerEvt('selectType1',value1)" ng-model="value1"

第二次拨打ng-change="triggerEvt('selectType2',value2)" ng-model="value2"

在哪里选择这样写代码

第一个选择框<select ng-model="temp['selectType1']"></select>

第二个选择框<select ng-model="temp['selectType2']"></select>

如果是这样的控制器编写函数

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

变量的 PS 名称仅作为示例。希望对您有所帮助。