我的复选框没有选择angularjs中的任何框

时间:2016-12-10 12:41:33

标签: javascript angularjs

*这里是html代码我正在尝试获取来自数据库的复选框值,但我的复选框未选中任何值,只显示复选框但未选择任何值.... < / p>

        ng-controller="noduesaccountsmodalcontroller" ng-init="init()">


    <form name="accounts" ng-submit=submit(accounts) novalidate>
<table class="table">

            <thead>
            <tr>
        <th>item</th>
        <th>received</th>
            </tr>
            </thead>

        <tbody ng-repeat="emp in nodueaccountassets">      
            <tr>
<td>{{emp}}</td>  <td> <input type="checkbox"  ng-model="emp.selected" value="{{emp.name}}"/></td>

                             </tr>
                        </tbody>
                     </table>
                    </div>
                </div>
            </div> 
            {{albumNameArray}}

    <!-- <input type="checkbox" value="{{emp}}"  ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->                                                    


   <button type="submit" value="submit" class="btn btn-primary">ACCEPT</button> 
        <button class="btn btn-warning"  ng-click="popup.$rollbackViewValue();">REJECT</button>

js控制器代码

           application.controller('noduesaccountsmodalcontroller',function  ($scope,$http,$window,$modal,$filter)                                                                                                                                                     
            $scope.nodueaccountassets=data.list;
        /*alert($scope.nodueaccountassets)*/
                })
            })

$scope.submit=function(form){
    $scope.albumNameArray = [];

angular.forEach($scope.nodueaccountassets,function(emp){
    if (emp.selected) $scope.albumNameArray.push(emp.name);

     alert(emp.selected);


/*$scope.albumNameArray = $scope.nodueaccountassets.filter(function(emp){
        return emp.selected;

        alert(emp.selected);*/
    })
    /*var emp_data='emp_assets='+$scope.nodueaccountassets+'&accounts_comments='+$scope.empcomments+'&emp_code='+$scope.emplycode;
    alert("data is"+emp_data)

    $http.get(domain+'/insertaccountassets?'+emp_data)
    .success(function(data, status, headers, config){
    alert('submit successfully');
                })

.error(function(data, status, headers, config){
            alert(data);
            })
            alert("error while submitting")
            }       
        $scope.reject=function(form)
        {
$modal.dismiss('reject');
var emp_data='accounts_comments='+$scope.empcomments+'&     emp_code='+$scope.emplycode;
            alert(emp_data)
            $http.get(domain+'/insertaccountassets?'+emp_data)
        }*/
}

});

1 个答案:

答案 0 :(得分:0)

我从您提供的代码中提取了plunker,并对您的HTML和JS代码进行了一些调整。

确保您的JSON数据包含数组中的对象,以便在您为数组对象创建.selected属性并将ng-model指定给您的复选框时,它可以正常运行

在HTML中

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="noduesaccountsmodalcontroller" ng-init="init()">
    <form name="accounts" ng-submit="submit(accounts)" novalidate="">
      <table class="table">
        <thead>
          <tr>
            <th>item</th>
            <th>received</th>
          </tr>
        </thead>
        <tbody ng-repeat="emp in nodueaccountassets">
          <tr>
            <td>{{emp.name}}</td>
            <td>
              <input type="checkbox" ng-model="emp.selected" value="{{emp.name}}" />
            </td>
          </tr>
        </tbody>
      </table>

        {{selectedItems}}


              <!-- <input type="checkbox" value="{{emp}}"  ng-model="checked" ng-init="checked=true"{{emp}}><br /> -->
      <button type="submit" value="submit" class="btn btn-primary">ACCEPT</button>
      <button class="btn btn-warning" ng-click="popup.$rollbackViewValue();">REJECT</button>
    </form>
  </body>

</html>

在JS中

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

    $scope.nodueaccountassets = [{'name':'x'},{'name':'a'},
    {'name':'b'},{'name':'c'},{'name':'d'}];

    $scope.init= function(){

    };
    $scope.selectedItems =[];
    $scope.submit = function(acc){
        angular.forEach($scope.nodueaccountassets,function(emp){
            if(emp.selected){
                $scope.selectedItems.push(emp.name);
            }
            });
    };
});