Question

我想管理AngularJS 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解决方案。有什么建议吗？

提前致谢！

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

Answer 1

这就是您要找的内容：http://jsfiddle.net/colares/shcv8e1h/2/

解释行为

通过关注文本字段，选择左侧的收音机，并根据文本字段的值更新所选值;
通过关注文本字段左侧的广播，所选值也会根据文本字段中的内容进行更新;
通过更改文本字段的值，所选值也会更新;
最后，通过关注任何其他标签或广播，自定义值仍然存在，而所选值则是关于所选选项的更新。

为此，我必须在自定义选项输入中使用更多内容：

ng-focus：当我点击文字字段时，它会更新有关文字字段的所选值;
ng-change：当我更新文本字段时，最终值也会更新;
ng-model：存储辅助变量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。

将相同的模型变量绑定到单选按钮和输入文本

3 个答案: