Question

＆＃13;

dm7 | dm6 | dm5 | dm4 | dm3 | dm2 | dm1 | today
  1 |   0 |   4 |   4 |   0 |   0 |   0 |     0

＆＃13;

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.technologies = [
      {id:1, name:'PHP'},
      {id:2, name:'DOTNET'},
      {id:3, name:'JAVA'},
      {id:4, name:'ORACLE'},
      {id:5, name:'ROR'},
      {id:6, name:'PYTHON'},
      {id:7, name:'C'},
      {id:8, name:'MYSQL'},
      {id:9, name:'HTML'},
      {id:10, name:'SQL'},
    ];
    
    $scope.existed = [
      {id:1, name:'PHP'},
      {id:8, name:'MYSQL'},
      {id:9, name:'HTML'}
    ];

    $scope.submit = function() {
        $scope.result = $scope.loopData;
    };

});

＆＃13;

上面我发布了示例示例。我有10项技术。我想默认选中<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="myApp"> <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController"> <div ng-repeat="technology in technologies"> <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="technology.id==existed[$index].id" /> <label for="technology{{$index}}" ng-bind="technology.name"></label> </div> </div> </body>，PHP和HTML，其中包含MYSQL变量。

请帮帮我。

Answer 1

创建一个函数并在ng-checked

中调用

$scope.checkID = function(name){
      var dat = $scope.existed.find(o=> o.name === name);
      if(dat) {return true }else{ return false}
}

<input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="checkID(technology.name)" />

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.technologies = [
      {id:1, name:'PHP'},
      {id:2, name:'DOTNET'},
      {id:3, name:'JAVA'},
      {id:4, name:'ORACLE'},
      {id:5, name:'ROR'},
      {id:6, name:'PYTHON'},
      {id:7, name:'C'},
      {id:8, name:'MYSQL'},
      {id:9, name:'HTML'},
      {id:10, name:'SQL'},
    ];
    
    $scope.existed = [
      {id:1, name:'PHP'},
      {id:8, name:'MYSQL'},
      {id:9, name:'HTML'}
    ];
    
    $scope.checkID = function(name){
      var dat = $scope.existed.find(o=> o.name === name);
      if(dat) {return true }else{ return false}
    }

    $scope.submit = function() {
        $scope.result = $scope.loopData;
    };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
        <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
            
            <div ng-repeat="technology in technologies">
                
                <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" ng-checked="checkID(technology.name)" />
                
                <label for="technology{{$index}}" ng-bind="technology.name"></label>
            </div>

        </div>
    </body>

Answer 2

在模型中添加选中的密钥

  {id:1, name:'PHP', checked:true},

并删除ng-checked

工作版

＆＃13;

var demoApp = angular.module('myApp', []);
demoApp.controller('QaController', function($scope, $http) {

    $scope.technologies = [
      {id:1, name:'PHP', checked:true},
      {id:2, name:'DOTNET'},
      {id:3, name:'JAVA'},
      {id:4, name:'ORACLE'},
      {id:5, name:'ROR'},
      {id:6, name:'PYTHON'},
      {id:7, name:'C'},
      {id:8, name:'MYSQL', checked:true},
      {id:9, name:'HTML'},
      {id:10, name:'SQL'},
    ];
    
    $scope.submit = function() {
        $scope.result = $scope.loopData;
    };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myApp">
        <div class="wrapper wrapper-content middlealigen col-sm-12" ng-controller="QaController">
            
            <div ng-repeat="technology in technologies">
                
                <input type="checkbox" ng-model="technology.checked" id="technology{{$index}}" />
                
                <label for="technology{{$index}}" ng-bind="technology.name"></label>
            </div>

        </div>
    </body>

＆＃13;

如何设置默认签入多个复选框 - AngularJS

2 个答案: