Reputation: 102
Im trying use radio button with ng-repeat, but when the repetitions are constructed the form dont bind the right way, bugs all radio -_-, what am i doing wrong? Like when I click in radio button change all or no one. I'm using angular js 1 and materialize.
Aqui: parte da estrututa do objeto
$scope.paineis = [
{
id:0,
listaCotacoes:[
{id:0, situacao:0},
{id:1, situacao:4}
]
},
{
id:1,
listaCotacoes:[
{id:6, situacao:0},
{id:9, situacao:4}
]
}
];
<tbody>
<tr ng-repeat="cotacoes in painel.listaCotacoes | orderBy: 'situacao'">
<td><a data-target="verCotacao" class="btn-floating teal modal-trigger"><i class="material-icons">description</i></a></td>
<td ng-if="cotacoes.situacao == 0"><i class="material-icons light-blue-text text-accent-4">lock_open</i></td>
<td ng-if="cotacoes.situacao == 2"><i class="material-icons gray-text">block</i></td>
<td ng-if="cotacoes.situacao == 3"><i class="material-icons green-text">thumb_up</i></td>
<td ng-if="cotacoes.situacao == 4"><i class="material-icons red-text">thumb_down</i></td>
<td>21/02/2014</td>
<td>
<form action="">
<div class="row">
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="aberta" ng-checked="cotacoes.situacao == 0" value="0" ng-model="cotacoes.situacao"/>
<label for="aberta{{cotacoes.id}}">Abrir</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Finalizado" ng-checked="cotacoes.situacao == 2" value="2" ng-model="cotacoes.situacao"/>
<label for="Finalizado{{cotacoes.id}}">Finalizado</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Aprovar" ng-checked="cotacoes.situacao == 3" value="3" ng-model="cotacoes.situacao"/>
<label for="Aprovar{{cotacoes.id}}">Aprovar</label>
</p>
</div>
<div class="col s3">
<p>
<input name="{{cotacoes.id}}" type="radio" id="Reprovada" ng-checked="cotacoes.situacao == 4" value="4" ng-model="cotacoes.situacao"/>
<label for="Reprovada">Reprovar</label>
</p>
</div>
</div>
</form>
</td>
</tr>
</tbody>
Upvotes: 0
Views: 82
Reputation: 1310
If your radio buttons are a group i.e where you have to select one from a group. The name "name="{{cotacoes.id}}""
should match on all of them. So instead of having them name="{{cotacoes.id}}"
change to name="radio-group"
on all of them that should work
<li>
<input type="radio" name="radio" id="radio2" ng-model="selectedItem.style_id" value="2">
<label for="radio2"><img src="/angular/images/Theme-Light-2.png" alt="course_theme_2"></label>
</li>
<li>
<input type="radio" name="radio" id="radio3" ng-model="selectedItem.style_id" value="3">
<label for="radio3"><img src="/angular/images/Theme-Light-3.png" alt="course_theme_3"></label>
</li>
<li>
<input type="radio" name="radio" id="radio4" ng-model="selectedItem.style_id" value="4">
<label for="radio4"><img src="/angular/images/Theme-Light-4.png" alt="course_theme_4"></label>
</li>
<li>
<input type="radio" name="radio" id="radio5" ng-model="selectedItem.style_id" value="5">
<label for="radio5"><img src="/angular/images/Theme-Light-5.png" alt="course_theme_5"></label>
</li>
name=""
attribute groups radio buttons
Upvotes: 1