用单选按钮重复的错误

时间:2017-08-28 15:14:02

标签: javascript html angularjs radio-button angularjs-ng-repeat

我尝试使用带有ng-repeat的单选按钮,但是当重复构建时,表单不会以正确的方式绑定,错误所有无线电-_-,我做错了什么?就像当我点击单选按钮改变全部或没有人。我正在使用角度js 1并实现。

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>

1 个答案:

答案 0 :(得分:1)

如果你的单选按钮是一个组,你必须从一个组中选择一个。名称"name="{{cotacoes.id}}""应匹配所有这些名称。因此,不要让他们name="{{cotacoes.id}}"更改为name="radio-group"所有应该有效的<{p>}

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