如何過濾angularjs中單選按鈕的值？

Question

如何在點擊單選按鈕時過濾category values？

Plunker

• 其實我要過濾類別值。

對於實施例： - 在 plunker我們已經顯示使用的data-ng-bind類別值。有兩個單選按鈕可用，1.Moral Ethics2. Religion & Culture。如果我們點擊第一個單選按鈕moral ethics它應該是filter只有moral ethis values，如果我們點擊第二個單選按鈕religon & Culture它應該是filter只有religon & Culture values。 。

我的HTML單選按鈕： -

<div class="col-md-3"> 
<label class="green"><input type="radio" name="myquestion" data-ng-model="myquestion.category" value="myquestion" ><span>Moral Ethics</span></label> 
    </div> 

<div class="col-md-3"> 
<label class="green"><input type="radio" name="culture" data-ng-model="culture.category" value="culture" ><span>Religion & Culture</span></label> 
</div> 

我的HTML過濾器： -

ng-repeat="question in questions | filter: myquestion | filter:culture" 

我的HTML數據： -

<div ng-repeat="question in questions | filter:myquestion | filter:culture"> 
    <small> 
    <span >{{$index + 1}}.</span> 
    <span data-ng-bind="question.category"></span> 
    </small> 
</div> 

我控制器數據： -

$scope.questions = [ 
    { 
"_id":"5863d3aaacaeddc00663bc07", 
"user":{ 
"roles":[ 
"admin" 
], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
    "friend_tag":[ 

     ], 
    "emotion":"Confused", 
    "category":"Religion & Culture", 
    "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
    "_id":"5863d3aaacaeddc00663bc07", 
    "user":{ 
    "roles":[ 
      "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
    "friend_tag":[ 

     ], 
    "emotion":"Confused", 
    "category":"Moral Ethics", 
    "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
    "_id":"5863d3aaacaeddc00663bc07", 
    "user":{ 
    "roles":[ 
    "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
    "friend_tag":[ 

     ], 
    "emotion":"Confused", 
    "category":"Environment & Health", 
    "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
    "_id":"5863d3aaacaeddc00663bc07", 
    "user":{ 
    "roles":[ 
    "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
    "friend_tag":[ 

     ], 
    "emotion":"Confused", 
    "category":"Environment & Health", 
    "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
    "_id":"5863d3aaacaeddc00663bc07", 
    "user":{ 
    "roles":[ 
    "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
     "friend_tag":[ 

     ], 
     "emotion":"Confused", 
     "category":"Religion & Culture", 
     "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
     "_id":"5863d3aaacaeddc00663bc07", 
     "user":{ 
     "roles":[ 
      "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
     "friend_tag":[ 

     ], 
     "emotion":"Confused", 
     "category":"Religion & Culture", 
     "created":"2016-12-28T15:00:58.777Z" 
    }, 
    { 
     "_id":"5863d3aaacaeddc00663bc07", 
     "user":{ 
     "roles":[ 
      "admin" 
     ], 
     "profileImageURL":"./modules/users/client/img/profile/uploads/ac4fbab396c2f725ed5211524f171136" 
     }, 
     "friend_tag":[ 

     ], 
     "emotion":"Confused", 
     "category":"Moral Ethics", 
     "created":"2016-12-28T15:00:58.777Z" 
    } 
] 

• 請找我plunker參考，幫助我..請更新plunker也知道確切的解決方案...謝謝。複選框象下面這樣

Answer 1

變化值就是它

<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Moral Ethics" >      
<input type="radio" name="myquestion" data-ng-model="myquestion.category" value="Religion & Culture" > 

和你反覆股利如下

<div ng-repeat="question in questions | filter:myquestion"> 
     <small> 
        <span >{{$index + 1}}.</span> 
         <span data-ng-bind="question.category"></span> 
        </small> 

    </div> 

以及請找到更新plunker

Answer 2

你有一些錯誤在角度使用單選按鈕，所以這裏有一些你必須做的改變。以下是您的視圖的更新代碼。

<div class="col-md-3"> 
     <label class="green"> 
     <input type="radio" name="myquestion" data-ng-model="selectedCategory" value="Moral Ethics"><span>Moral Ethics</span></label> 
    </div> 

    <div class="col-md-3"> 
     <label class="green"> 
     <input type="radio" name="culture" data-ng-model="selectedCategory" value="Religion & Culture"><span>Religion & Culture</span></label> 
    </div> 

    <div ng-repeat="question in questions | filter:selectedCategory"> 
     <small> 
        <span >{{$index + 1}}.</span> 
         <span data-ng-bind="question.category"></span> 
        </small> 

    </div> 

Answer 3

我更新Plunker

http://plnkr.co/edit/uN2NoO8JaBUINRkvEljt?p=preview

爲：

<div ng-controller="MyCntrl"> 
<div class="col-md-3"> 
     <label class="green"><input type="radio" name="myquestion" data-ng-model="category" value="Moral Ethics" ><span>Moral Ethics</span></label></div> 

<div class="col-md-3"> 
     <label class="green"><input type="radio" name="culture" data-ng-model="category" value="Religion & Culture" ><span>Religion & Culture</span>  </label></div> 

<div ng-repeat="question in questions|filter:category "> 
    <small> 
       <span >{{$index + 1}}.</span> 
        <span data-ng-bind="question.category"></span> 
       </small> 

    </div> 

    </div> 

它工作正常。