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

Binding the same model variable to radio buttons and input-text

本文关键字：单选按钮 输入 文本 绑定 变量 模型      更新时间：2023-09-26

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

提前感谢！

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

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

导出行为

  • 通过关注文本字段，选择左侧的单选按钮，并根据文本字段的值更新所选值
  • 通过关注文本字段左侧的单选按钮，所选值也会根据文本字段中的内容进行更新
  • 通过更改文本字段的值，所选的值也会更新
  • 最后，通过关注任何其他标签或单选按钮，自定义值将保留，而所选值将更新所选选项

为此，我不得不在自定义选项输入中使用更多的东西：

  • ng焦点：当我点击文本字段时，它会更新所选的文本字段值
  • ng更改：当我更新文本字段时，最终值也会更新
  • ng模型：存储辅助变量customColor，无论所选值如何，该变量都保持不变
  • 请记住，当我们选择给定表达式时，ng值用于设置单选(或<option>(的值。这会使单选和输入文本"绑定"，因为它们具有相同的值

您可以使用$scope$观察并查找控制器的变化，如下所示：

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

$watch是最佳选择。此外，不用在$watch的第一个参数中使用modelName，您可以创建自己的东西(例如，观察输入框的长度(，并使用第二个参数对其执行所需的操作。

相关文章：