checkboxes are not displayed inside ng repeat angularjs

Question

I want to display checkboxes inside ng repeat. The checkboxes are not displayed. The checkboxes are not displayed at all. I am not understanding what the misatke is. Here is the code -

<div class = "col s4">
<form ng-submit="$ctrl.todoAdd()">
<input type="text" ng-model="$ctrl.todoInput" size="50" placeholder="Add New">
<input type="submit" value="Add New">
</form>


<br>
<div ng-repeat="x in $ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>

<p><button ng-click="$ctrl.remove()">Remove marked</button></p>
</div>

And the javascript code-

angular.
  module('dashboard').
  component('dashboard', {
    templateUrl: 'dashboard/dashboard.html',
    controller: ['$routeParams','$http',
  function dashboardController($routeParams,$http) {
    this.todoList = [{todoText:'Clean House', done:false}];

this.todoAdd = function() {
    this.todoList.push({todoText:this.todoInput, done:false});
    this.todoInput = "";
};

this.remove = function() {
    var oldList = this.todoList;
    this.todoList = [];
    angular.forEach(oldList, function(x) {
        if (!x.done) this.todoList.push(x);
    });
};
//Rest of the controller code
}
]
});

It just has the attributes todoText and boolean attribute done — Sahana ys
– Sahana ys, Commented Apr 17, 2017 at 19:21

Sajeetharan · Accepted Answer · 2017-04-17 19:47:06Z

1

You need to have empty dependencies passed to your module while declaring,

change it as,

angular.
  module('dashboard',[]).

DEMO

var app = angular.module('myFirstApp', []);
app.controller('myCtrl', function () {
 this.todoList = [{
  "todoText": "run today",
  "done": false
},
{
  "todoText": "read today",
  "done": false
}];
});

<html>
  <head>
	<title>My First AngularJS App</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
	<script src="app.js"></script>
  </head>
  <body>
	<h1>My First AngularJS App</h1>
	<div ng-app="myFirstApp" ng-controller="myCtrl as ctrl">
		 <div ng-repeat="x in ctrl.todoList">
<input type="checkbox" ng-model="x.done"> <span ng-bind="x.todoText"></span>
</div>
	</div>
  </body>
</html>

edited Apr 17, 2017 at 19:47

answered Apr 17, 2017 at 19:23

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sahana ys Over a year ago

I tried that. Now I am getting an error "The controller with the name 'dashboardController' is not registered."

Sajeetharan Over a year ago

@Sahanays check if you have registered the controller. you have not provided enough code

Pop-A-Stash Over a year ago

The difference is the module definition. Original poster did not include square brackets, which are required for module definition.

Sahana ys Over a year ago

I am not understanding what to do! Please help me out

Sajeetharan Over a year ago

@Sahanays lets initiate a chat

Collectives™ on Stack Overflow

checkboxes are not displayed inside ng repeat angularjs

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related