javascript - 使用单选按钮重复 ng 时出现错误

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

我尝试使用带有 ng-repeat 的单选按钮,但是当构造重复时,表单没有以正确的方式绑定(bind),所有单选错误 -_-,我做错了什么?就像当我单击单选按钮时更改全部或不更改任何一个。我正在使用 Angular js 1 并实现。

Aqui:parte da estrututa do object

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

最佳答案

如果您的单选按钮是一组,即您必须从一组中选择一个。名称 "name="{{cotacoes.id}}"" 应与所有这些都匹配。因此,不要将所有应该起作用的 name="{{cotacoes.id}}" 更改为 name="radio-group"

<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

关于javascript - 使用单选按钮重复 ng 时出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45922239/

相关文章:

javascript - 不同设备上两个不同HTML文件之间的通信(JS)

javascript - 用户名和密码的 Ionic 弹出模板

javascript - 在 Angular/Javascript 中确定一个日期是否在周末

Javascript 添加了多个 Bootstrap Select div 不工作

javascript - jQuery .click() 在replaceWith() 之后不起作用

html - 我无法将 div 居中

html - CSS:将元素高度调整为屏幕的 x%

javascript - 将所有值保存在 ng-repeat 中的输入文本框中

javascript - 在 jQuery 中添加指向特定短语或关键字的链接

javascript - jQuery JSON API 不工作