在angularjs问题中选择多个收音机选项

我想要选择多个收音机选项。新增至angularjs。在angularjs问题中选择多个收音机选项

步骤产生问题：

从第1选择菜单中选择任何一个国家 - >选择原因
从第2选择菜单中选择任何一个国家 - >选择原因Ç

这里是上述原因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>

来源

2017-03-13 Lini

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

要选择多个无线选项或设置页面加载时默认复选框和单选按钮？你能否详细说明你所面临的问题？ –

@SaravananSachi加我的意见。请检查 – Lini

做出一些输入为隐藏，你可以使用

<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'" />

来源

2017-03-13 04:24:34

@Lini看到我的答案这可能对你有帮助 –

我的问题是只有一个单选按钮被选中。在第二个国家列表中，我有相同的理由选项可供选择，但如果我选择任何一个第一个国家选项消失。我想持有不同国家的两个理由。 – Lini

你应该重命名模型，然后给同一模型将无法正常工作 –

终于得到了解决

我刚添加索引，则单选按钮的名称，它的工作，这将给不同的名称为每个组按钮。

名= '_原因{{$指数}}'

来源

2017-03-13 08:30:52 Lini

在angularjs问题中选择多个收音机选项

回答

相关问题