將文本框綁定到選擇列表

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這會有所幫助。