在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問題中選擇多個收音機選項

回答

相關問題