单选按钮仅选择第一个单选按钮没有其它无线电按钮被选择
问题描述:
这是我的控制器单选按钮仅选择第一个单选按钮没有其它无线电按钮被选择
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>
它打印的单选按钮正确然而我只能选择第一个单选按钮没有其他单选按钮被选中 什么问题我试过这么多的问题,但他们都不是我的问题相似
答
你必须给不同的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>
答
定义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>
谢谢你点的问题:) – Jabaa