將相同的模型變量綁定到單選按鈕和輸入文本

Question

我想使用AngularJS UI進行管理，該UI允許選擇一個選項（顯示為單選按鈕組）或在輸入文本中鍵入的自定義值。

它應該看起來像： http : //jsbin.com/foyujali/7/edit

您也可以在下面的鏈接中看到以下代碼：

的HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
<div ng-app="tagsApp" ng-controller="TagsCtrl">
  <input type="radio" id="conversion_type_sale" ng-model="tag.conversion_type" value="sale"/>
  <label for=conversion_type_sale>Sale</label>

  <input type="radio" id="conversion_type_lead" ng-model="tag.conversion_type" value="lead"/>
  <label for=conversion_type_lead>Lead</label>

  <input type="radio" id="conversion_type_custom" ng-model="tag.conversion_type" value="{{tag.conversion_type_custom_value}}"/>
  <input type="text" placeholder="Custom"  ng-model="tag.conversion_type_custom_value" id="conversion_type_custom_value"/>
  <p>
    The choosen conversion type is: <strong>{{tag.conversion_type}}</strong>
  </p>  
</div>

和JS：

angular.module('tagsApp', []).
controller('TagsCtrl', function ($scope) {
    $scope.tag = {conversion_type: 'lead'};
});

我不想使用ngChange指令，所以我只將value或ng-value （我都嘗試過）綁定到輸入文本的模型。 這種方式無法正常工作，但是我想有一個優雅的AngularJS解決方案。 有什么建議么？

提前致謝！

PS只是為了澄清-我需要以下功能： http ://jsbin.com/foyujali/10/edit，但我想避免使用ngChange指令。

Answer 1

這就是您要尋找的： http : //jsfiddle.net/colares/shcv8e1h/2/

解釋行為

• 通過關注文本字段，選擇左側的單選按鈕，並根據文本字段的值更新所選值；
• 通過關注文本字段左側的單選按鈕，也會根據文本字段中的內容更新所選值；
• 通過更改文本字段的值，選擇的值也將更新。
• 最后，通過專注於其他標簽或收音機，可以保留自定義值，同時根據所選選項更新所選值。

為此，我不得不在自定義選項輸入中使用其他一些內容：

• ng-focus ：當我單擊文本字段時，它將更新有關文本字段的所選值；
• ng-change ：隨着我更新文本字段，最終值也被更新；
• ng-model ：存儲輔助變量customColor ，無論選擇什么值，該變量customColor保留。
• 請記住，當我們選擇ng-value時，它會根據給定表達式來設置單選（或<option> ）的值。 因為單選框和輸入文本具有相同的值，所以這使它們成為“綁定”。

Answer 2

您可以使用$ scope。$ watch來查找控制器中的更改，如下所示：

http://jsfiddle.net/2R6aN/

var app = angular.module('tagsApp',[]);
app.controller('TagsCtrl', function ($scope) {
    $scope.tag = {conversion_type: 'lead'};
    $scope.$watch('conversion_type_custom_value',function(new_val) {
        if (new_val) {
            $scope.tag.conversion_type = new_val;
        }
    });
});

Answer 3

$ watch是最佳選擇。 另外，您可以創建自己的東西（例如，監視輸入框的長度）並使用第二個參數對其執行所需的操作，而不是在$ watch的第一個參數中使用modelName。