checkbox with ng-repeat not working

Question

I got a list of levels when someone clicks on the levels I need to call the method in AngularJs.When I click on the checkbox nothing is happening, but when I click on the checkbox outside the ng-repeat is working fine. This is my code.

<div class="col-md-4">
                        <label>Select Level:</label>
                        <div ng-repeat="level in vm.Levels | filter: {Workshop:true}">


                            <div class="i-checks">
                                <input type="checkbox" ng-model="level.Name" id="{{'level-'+ level.SkillId}}" icheck />
                                <label class="control-label">
                                    {{level.Name}}
                                </label>
                            </div>
                        </div>
                        <input type="checkbox" />

                    </div>

Here is my controller code:

(function () {
            'use strict';
            var controllerId = 'SeriesEditor';
            angular.module('app').controller(controllerId, ['apiFactory', "$filter", SeriesEditor]);

            function SeriesEditor(wfapi, $filter) {
                var vm = this;

                vm.Init = function () {                   
                    vm.Levels = [];                  
                }

     vm.loadLevelsForSeries = function () {

                    var mReq = new Models.services.LevelListRequest();
                    api.get(mReq)
                        .then(function (data) {
                            vm.Levels = data.Results;
                        });
                }
     }
        })();

Thanks in advance.

controller code ?

Rohìt Jíndal
– Rohìt Jíndal

2016-10-31 09:26:03 +00:00
Commented Oct 31, 2016 at 9:26 — Rohìt Jíndal
– Rohìt Jíndal, Commented Oct 31, 2016 at 9:26

Nikhil Mohanan · Accepted Answer · 2016-10-31 10:09:46Z

// Code goes here

angular
	.module('myApp',[])
	.run(function($rootScope){
		$rootScope.title = 'myTest Page';
	})
	.controller('testController', ['$scope', function($scope){
	  
		$scope.Levels  = [{Name:'string1',SkillId:1},{Name:'string2',SkillId:2},{Name:'string3',SkillId:3}]
		
	}])

<!DOCTYPE html>
<html data-ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body data-ng-controller="testController">

  <div class="col-md-4">
    <label>Select Level:</label>
    <div ng-repeat="level in Levels">

      <div class="i-checks">
        <input type="checkbox"  id="{{'level-'+ level.SkillId}}" icheck />
        <label class="control-label">
          {{level.Name}}
        </label>
      </div>
    </div>
    <input type="checkbox" /> checkbox outside

  </div>

</body>

</html>

Collectives™ on Stack Overflow

checkbox with ng-repeat not working

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related