将文本框绑定到选择列表

Question

这是我的 Demo .
我想将文本框绑定到 selectlist ，我的意思是当我写 vahid 时，值更改为 selectlist 中的 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

首先

你会发现两者不一样。

很明显，它们不一样。一个单独用于控制器；另一个是输入元素上的指令。

但即使在他们的应用中，他们也有所不同。

当您使用 $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 编写这样的代码

第一个select盒子<select ng-model="temp['selectType1']"></select>

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

如果控制器像这样写函数

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

PS 变量名仅供 example.Hope 这有帮助。

Answer 2

我认为正如其他答案中提到的那样 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>

将文本框绑定到选择列表

bind textbox to selectlist

angularjs

watch