在angularjs问题中选择多个单选选项答案

【问题标题】：Select multiple radio options in angularjs issue在angularjs问题中选择多个单选选项
【发布时间】：2017-08-03 00:45:50
【问题描述】：

我想选择多个单选选项。Angularjs 的新手。

产生问题的步骤：

从第一个选择菜单中选择任何国家 -> 选择原因 A
从第二个选择菜单中选择任何国家 -> 选择原因 C

这里上面的原因 A 选项消失了，只选择了原因 C。我想持有不同国家的两个不同原因部分。

这是小提琴 http://jsfiddle.net/Lini7/knfsv64m/8/

var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
    console.log("print the notin value from data",this.item.noTin);
    if (!this.item.country) return false;
    var selectedCountry = this.item.country.country.toLowerCase();
    var fourCountries = ["cayman islands", "albania"]
    var isIt = fourCountries.indexOf(selectedCountry) >= 0;
    console.log("print match country val",isIt);
    console.log("get checknotin value before assign",checkNoTin);
    if (checkNoTin) this.item.noTin = true;
    console.log("final checknotin val",checkNoTin);
    return isIt;
  }
});

还有风景

<body>
<div ng-app="myApp">
  <div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
  <label class="checkbox">
    <input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
  </label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
  <div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
    <div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
      <label class="radio-button">
        <input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
      </label>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
          <label class="item item-input input-margin">
            <textarea  ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
          </label>
        </label>
      </div>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
        </label>
      </div>
    </div>
  </div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
  <label class="checkbox">
    <input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
  </label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
  <div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
    <div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
      <label class="radio-button">
        <input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
      </label>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
          <label class="item item-input input-margin">
            <textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
          </label>
        </label>
      </div>
    </div>
    <div ng-if="!showReasonA()" class="row margin-bottom-medium">
      <div class="col">
        <label class="radio-button">
          <input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
        </label>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</body>

【问题讨论】：

这里是小提琴jsfiddle.net/Lini7/knfsv64m/8
您想在页面加载时选择多个单选选项或设置默认复选框和单选按钮？您能否详细说明您面临的问题？
@SaravananSachi 添加了我的 cmets.please 检查
你到底想要什么？？你的要求不清楚@Lini
@BOSS 我为每个国家/地区选择都有单独的单选按钮。如何在每个部分中选择单选按钮。目前只能选择一个单选按钮

标签： angularjs html select checkbox radio-button

【解决方案1】：

要将某些输入设为隐藏，您可以使用

<p ng-show="condition">I'm shown</p>

并且这个条件值应该在你的控制器范围内初始化

$scope.condition=true/false

要隐藏显示输入，您可以使用 ng-if。最好将 ng-if 用于动态输入。查看详情here

现在，对于您的情况，您可以在条件中使用 item.reason 来显示和隐藏您的输入。

<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />

【讨论】：

@Lini 看看我的回答这可能对你有帮助
我的问题是只选择了一个单选按钮。在第二个国家/地区列表中，我有相同的原因选项可供选择，但如果我选择任何一个，第一个国家/地区选项就会消失。我想持有不同国家的两个原因。
你应该重命名模型然后给出相同的模型将不起作用
重命名模型是为了什么？我不希望解决方案隐藏我的单选按钮。我想知道如何制作一组单选按钮并从每个国家/地区部分中选择一个jsfiddle.net/Lini7/knfsv64m/10最新小提琴
是的，现在我知道了。我建议您针对每个问题发布两个或三个问题 .. :) .. 以便清楚问题仍然很广泛

【解决方案2】：

终于解决了

我刚刚添加了带有索引的单选按钮名称，然后它可以为每组按钮提供不同的名称。

name='reason_{{$index}}'

【讨论】：