Angular:将值更改为数组

时间:2016-05-19 19:48:00

标签: javascript angularjs

我是角色新手,我试图从表中推送某个选中的复选框并更新为新数组

<tr ng-repeat="val in values ">
      <td ng-bind="$index"></td>
      <td ng-bind="val.rec">ED1500322</td> 
      <td>working</td>
      <td ng-bind="val.result">I am going to School</td>
      <td>
       <div class="radio">
        <input ng-model="val.iscorrect" value="yes" type="radio">
        <label for="opt1">yes</label>
        <input ng-model="val.iscorrect" value="no" type="radio">
        <label for="opt10">no</label>
       </div>
      </td>
    </tr>

我们可以看到复选框存在,当选中复选框时,我想将其推入新数组

我希望新数组只选中复选框

我知道这可以通过索引来实现,不知道该怎么做

Plunker:http://plnkr.co/edit/NGnUwudclnOsnO6Y9Vww?p=preview

感谢

提供任何仅选中复选框的帮助

4 个答案:

答案 0 :(得分:1)

你可以搭载ng-change。它看起来像这样

的javascript

$scope.DoChange = function(val) { array.push(val)};

HTML

<input ng-model="val.iscorrect" value="yes" type="radio" ng-change="DoChange(val)">

我更新了plunkr

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app" ng-controller="ctrl">
  <table class="table table-bordered dashboard_table">
    <thead>
      <tr>
        <th>Sl No</th>
        <th>Recording ID</th>
        <th>Recording
          <br> Audio File</th>
        <th>Speech Recognizer
          <br> Output text</th>
        <th>100% Correct
          <br>- Y(1) / N(0)?</th>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="val in values ">
          <td ng-bind="$index"></td>
          <td ng-bind="val.rec">ED1500322</td> 
          <td>working</td>
          <td ng-bind="val.result">I am going to School</td>
          <td>
           <div class="radio">
            <input ng-model="val.iscorrect" value="yes" type="radio">
            <label for="opt1">yes</label>
            <input ng-model="val.iscorrect" value="no" type="radio" ng-change="log(val)">
            <label for="opt10">no</label>
           </div>
          </td>
        </tr>

    </tbody>
  </table>
  <button ng-click=getResult()>getResult</button>
  <script>
    var ngApp = angular.module('app', []);
    ngApp.controller('ctrl', function($scope) {
       $scope.log = function(v){console.log(v);}
      $scope.values = [{
        name: "John",
        rec:234,
        iscorrect: ''
      }, {
        name: "Paul",
        rec:44,
        iscorrect: ''
      }, {
        name: "George",
        rec:2664,
        iscorrect: 'no'
      }, {
        name: "Ringo",
        rec:124,
        iscorrect: 'yes'
      }];

      $scope.result=[]
       $scope.getResult=function(){
        scope.result=[]
       }

    });



  </script>
</body>

</html>

答案 1 :(得分:1)

如果您希望将所有选定项目推送到$ scope.results。从您的plunker获取的以下修改代码将起作用:

 var ngApp = angular.module('app', []);
 ngApp.controller('ctrl', function($scope) {

     $scope.values = [{
         name: "John",
         rec: 234,
         iscorrect: ''
     }, {
         name: "Paul",
         rec: 44,
         iscorrect: ''
     }, {
         name: "George",
         rec: 2664,
         iscorrect: 'no'
     }, {
         name: "Ringo",
         rec: 124,
         iscorrect: 'yes'
     }];

     $scope.result = []
     $scope.getResult = function() {
         $scope.result = $scope.values.filter(function(res) {
             return res.iscorrect.length > 0;
         })
     }

 });

答案 2 :(得分:1)

在这里你应该这样做 只有改变这一点。

<tr ng-repeat="(ind,val) in values track by $index">
    <td ng-bind="$index"></td>
    <td ng-bind="val.rec">ED1500322</td>
    <td>working</td>
    <td ng-bind="val.result">I am going to School</td>
    <td>
      <div class="radio">
        <input ng-model="values[ind].iscorrect" value="yes" type="radio">
        <label for="opt1">yes</label>
        <input ng-model="values[ind].iscorrect" value="no" type="radio">
        <label for="opt10">no</label>
      </div>
    </td>   
</tr>

Plunk Here!

答案 3 :(得分:1)

默认情况下,复选框/单选按钮返回true或false。

这意味着您只需在单选按钮上添加ng-click指令,并使用$ index和您希望存储的任何其他数据传递ng-model。

示例

 <input ng-model="val.iscorrect" data-value="no" type="radio" ng-click="pushValue($index,val.iscorrect)">

仅供参考我会假设数据值=&#34;否&#34;连接到false所以不需要通过它..

希望这有帮助