單選按鈕僅選擇第一個單選按鈕沒有其它無線電按鈕被選擇

Question

這是我的控制器

app.controller('testController',function($scope){ 

    $scope.categorys = [ 
       {name:'Paintings',value:'1'}, 
       {name:'Photography',value:'2'}, 
       {name:'Drawings',value:'3'}, 
       {name:'Sculpture',value:'4'} 
      ]; 
}) 

在我的HTML

<div class="grid-two" ng-repeat="category in categorys"> 
           <div class="image-thumb"> 
            <p>{{category.name}}</p> 
            <figure> 
             <img src="/images/1.jpg"> 
            </figure> 
            <input ng-model="art.category" ng-value="category.value" type="radio" id="seling3"/> 
            <label for="seling3" class="blue-overlay"> 
             <i class="icon icon-tick c-sprite"></i> 
            </label> 
           </div> 
          </div> 

它打印的單選按鈕正確然而我只能選擇第一個單選按鈕沒有其他單選按鈕被選中 什麼問題我試過這麼多的問題，但他們都不是我的問題相似

Answer 1

你必須給不同的ID對每個input[type="radio"]：

<input ng-model="art.category" ng-value="category.value" type="radio" 
id="seling{{category.value}}"/> 
<label for="seling{{category.value}}" class="blue-overlay"> 
    <i class="icon icon-tick c-sprite"></i> 
</label> 

Answer 2

定義art.category對象在控制器這樣

app.controller('testController',function($scope){ 
     $scope.art = {'category' : ''} 
}) 

演示

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 
    $scope.art = {'category' : ''} 
 
    $scope.categorys = [ 
 
     {name:'Paintings',value:'1'}, 
 
     {name:'Photography',value:'2'}, 
 
     {name:'Drawings',value:'3'}, 
 
     {name:'Sculpture',value:'4'} 
 
    ]; 
 
})

<figure> 
 
             <img src="/images/1.jpg"> 
 
            </figure>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<div class="grid-two" ng-repeat="category in categorys"> 
 
           <div class="image-thumb"> 
 
            <p>{{category.name}}</p> 
 
            <figure> 
 
             <img src="/images/1.jpg"> 
 
            </figure> 
 
            <input ng-model="art.category" ng-value="category.value" type="radio" id="seling3"/> 
 
            <label for="seling3" class="blue-overlay"> 
 
             <i class="icon icon-tick c-sprite"></i> 
 
            </label> 
 
           </div> 
 
          </div> 
 
</div>