AngularJS의 라디오 버튼에서 하나의 항목이 작동하지 않습니다.

Question

AngularJS 및 필터 옵션을 사용하고 있습니다. 라디오 버튼으로 항목을 선택하면 올바른 데이터를 얻습니다.

<input ng-click="filter = !filter" ng-value="!filter" ng-checked="filter" type="radio" ng-model="ctrl.filter[category]" /> 

하지만 라디오 버튼 하나만 선택하면 작동하지 않습니다. 뭐가 문제 야? 감사.

DEMO

Answer 1

제대로 작동하려면, 라디오 입력이 name 속성이 필요합니다. 그룹의 모든 라디오에서 동일해야합니다.

value을 단일 속성에 저장하려면 라디오의 ng-model을 변경해야합니다.

<input ng-click="filter = !filter" ng-value="category" name="wineCategory" ng-checked="filter" type="radio" ng-model="ctrl.filter" /> 

마지막으로 필터 방법을 조정해야합니다.

Answer 2

라디오 박스 그룹의 모든 입력에는 일반적으로 입력 값인 ng 모델에 대한 참조가 하나만 있어야합니다.

따라서, 귀하의 의견 마크 업,

 <input value="{{category}}" type="radio" ng-model="ctrl.filterCategory" /> 

어디 값 = 범주 빨간색 될 수있는 동안 또는 샴페인 것이다.

지금 마찬가지로 필터 기능은 여기

function filterByCategory(wine) { 
    return (self.filterCategory === wine.category || self.filterCategory === "") ? 'show':'hide'; 
    } 

근무 데모처럼 NG 모델을 사용하도록 변경합니다.

http://jsfiddle.net/nah42h1c/2/