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

您必须为每个input[type="radio"]提供不同的ID：

<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' : ''} 
})

演示

＆＃13;

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'}
  ];
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

角度js中的单选按钮仅选择第一个单选按钮，而不选择其他单选按钮

2 个答案: