将文本框绑定到选择列表

Question

这是我的Demo。
我要绑定文本框选择列表的，我的意思是，当我写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**这样，我想$腕表使应用太重。

有什么窍门或方法可行以更好的方式来做到这一点？

感谢

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-变化只能结合ng-model - 换句话说，只有当ngModel.$viewValue（参见ngModelController文档以获取更多信息）被改变了NG-变化表达式，它通常发生以响应用户发起的事件。

二：

我不这么认为，你必须写15个功能只需使用一个通用函数这样

第1次呼叫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名称是刚刚example.Hope这会有所帮助。