将相同的模型变量绑定到单选按钮和输入文本 [英] Binding the same model variable to radio buttons and input-text

问题描述

我想使用AngularJS UI进行管理，该UI允许选择一个选项(显示为单选按钮组)或在输入文本中键入的自定义值.

I would like manage with AngularJS UI which allows to pick one of the options (displayed as radio buttons group) or a custom value typed in a input-text.

它应该看起来像: http://jsbin.com/foyujali/7/edit

这是您也可以在下面的链接中看到的代码:

Here is the code that you can see also in the link below:

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解决方案.有什么建议吗?

I would prefer not to use ngChange directive so I just bind the value or ng-value (I tried both) to the model of the input-text. It doesn't work properly this way, but I suppose there is an elegant AngularJS solution. Any suggestions?

提前谢谢！

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

P.S. Just to clarify - I want the following functionality: http://jsbin.com/foyujali/10/edit but I want to avoid using ngChange directive.

推荐答案

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

This is what you're looking for: http://jsfiddle.net/colares/shcv8e1h/2/

解释行为

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

为此，我不得不在自定义选项输入中使用其他一些内容:

To do so, I had to use a few more things in custom option input:

• ng-focus :当我单击文本字段时，它会更新有关文本字段的所选值；
• ng-change :当我更新文本字段时，最终值也已更新；
• ng模型:用于存储辅助变量 customColor ，无论选择哪个值，该代码都会保留.
• 请记住， ng-value 用于设置我们选择给定表达式后的单选(或< option> ).这使单选按钮和输入文本具有绑定"性，因为它们具有相同的值.

• ng-focus: when I click on the text field, it updates the chosen value regarding the text field;
• ng-change: as I update the text field, the final value is also updated;
• ng-model: to store the auxiliar variable customColor, which remains regardless of the selected value.
• Remember, the ng-value is used to set the value of the radio (or an <option>) from a given expression when we select it. This makes the radio and input text "bound", because they have the same value.

这篇关于将相同的模型变量绑定到单选按钮和输入文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！