Question

这是我的Demo 我想将文本框绑定到选择列表，我的意思是当我在selectlist中写入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中的更新演示。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

首先

您可以发现here两者不相同。

他们显然不一样。一个仅用于控制器;另一个是输入元素的指令。

但即使在他们的申请中他们也不同。

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

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

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

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

值得注意的是，ng-change仅与ng-model结合使用 - 换句话说，仅在ngModel.$viewValue时评估ng-change表达式（有关详细信息，请参阅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名称仅用于示例。希望这有帮助。

将文本框绑定到选择列表

2 个答案: