AngularJs : 모델에 따라 체크 된 라디오 버튼을 설정하는 방법

AngularJs : 모델에 따라 체크 된 라디오 버튼을 설정하는 방법

---

isDefault 값으로 storeLocations 개체에 반환되는 모델이 있습니다. isDefault가 true를 반환하면 그룹에서 해당 라디오 버튼을 선택하고 싶지 않습니다.

$ each (데이터, 함수 (인덱스, 값)를 수행하고 반환 된 각 개체를 반복해야하는 각도 구조를 사용하여 작업을 수행하는 더 쉬운 방법이 확실하지 않습니다.

목적 :

storeLocations = [
 {
  ... more values,
  isDefault: true
 }
]

마크 업 :

    <tr ng-repeat="location in merchant.storeLocations">
        <td>{{location.name}}</td>
        <td>{{location.address.address1}}</td>
        <td>{{location.address.address2}}</td>
        <td>{{location.address.city}}</td>
        <td>{{location.address.stateProvince}}</td>
        <td>{{location.address.postalCode}}</td>
        <td>{{location.address.country}}</td>
        <td>{{location.website}}</td>
        <td>{{location.zone}}</td>
        <td><input type="radio" ng-model="location.isDefault" value="{{location.isDefault}}" name="isDefault_group"></td>

---

사용 ng-value대신에 value.

ng-value="true"

ng-checked코드 이더로 인해 버전 이 더 나 기쁩니다.

---

라디오 버튼 그룹이 있고 모델별로 체크되어있는 라디오 버튼을 설정하고자한다면, value과 같은 라디오 버튼이 ng-model자동으로 체크됩니다.

<input type="radio" value="1" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="2" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="3" ng-model="myRating" name="rating" class="radio">
<input type="radio" value="4" ng-model="myRating" name="rating" class="radio">

값 myRating이 "2"이면 두 번째 라디오 버튼이 선택됩니다.

---

더 강력하고 내가 피하기가 가진 참조하는 것이 한 가지 방법은 모든 모델은 NG- 속성을 사용하는 것입니다 , 하고 .isDefaultng-modelng-valueng-checked

ng-model : 값을 모델에 바인딩합니다.

ng-value : ng-model바인딩 에 많은 값 입니다.

ng-checked : 평가되는 값 또는 모드입니다. 라디오 버튼과 체크 박스에 유용합니다.

사용 예 : 다음 예에는 내 모델과 내 사이트에서 지원하는 언어 목록이 있습니다. 지원되는 다른 언어를 표시하고 선택한 언어로 모델을 업데이트합니다.

<!-- Radio -->
<div ng-repeat="language in languages">

  <div>
    <label>

      <input ng-model="site.lang"
             ng-value="language"
             ng-checked="(site.lang == language)"
             name="localizationOptions"
             type="radio">

      <span> {{language}} </span>

    </label>
  </div>

</div>
<!-- end of Radio -->

우리 모델 site.lang은 language평가중인 표현식 (site.lang == language)이 참일 때마다 값 을 얻습니다 . 그러면 모델에 이미 변경 사항이 있으므로 서버와 쉽게 동기화 할 수 있습니다.

---

기본 제공 각도 속성을 사용하여 끝났습니다. ng-checked="model"

---

질문 주석에서 다소 논의했듯이 이것은 할 수있는 한 가지 방법입니다.

• 데이터를 처음 검색 할 때 모든 위치를 반복하고 storeDefault를 현재 기본값 인 상점으로 설정하십시오.
• 마크 업에서 : <input ... ng-model="$parent.storeDefault" value="{{location.id}}">
• 데이터를 저장하기 전에 모든 merchant.storeLocations를 반복하고 location.id가 storeDefault와 동일한 상점을 제외하고 isDefault를 false로 설정하십시오.

위의 내용은 각 위치에 고유 한 값을 포함하는 필드 (예 : id)가 있다고 가정합니다.

ng-repeat가 자식 범위를 만들고 부모 범위에서 storeDefault 매개 변수를 조작하려고하기 때문에 $ parent.storeDefault가 사용됩니다.

바이올린 .

---

이렇게하세요<input type="radio" ng-disabled="loading" name="dateRange" ng-model="filter.DateRange" value="1" ng-checked="(filter.DateRange == 1)"/>

참고 URL : https://stackoverflow.com/questions/14530785/angularjs-how-to-set-radio-button-checked-based-on-model