list not displaying in angular binding?

Question

I am trying my first angular js list example. Having issues displaying the list, there are no errors in the console:(

html

<body ng-controller="mycontroller">
    <form ng-submit="addtask()">total nr of tasks: {{myvar.length}}
        <br />remaining: {{remaining()}}
        <input type="text" ng-model="newtask" />
        <ul ng-repeat="var in myvar">
            <li>
                <input type="checkbox" ng-model="myvardone" /> <span class="done-{{myvardone}}">{{var.text}}</span>

            </li>
        </ul>
        <button type="submit">add</button>
    </form>
</body>

script:

   function mycontroller($scope) {
       $scope.myvar = [{
           text: 'bert',
           done: false
       }, {
           text: 'ed',
           done: true
       }, {
           text: 'pet',
           done: false
       }];

       $scope.addtask = function () {
           $scope.myvar.push({
               text: $scope.newtask,
               done: false
           });
       }

       $scope.remaining = function () {
           var count = 0;
           angular.forEach($scope.myvar, function (t) {
               if (t.done) {
                   count++
               } else {
                   count += 0;
               }
           });
           return count;
       }
   }

jsfiddle:http://jsfiddle.net/dingen2010/vc2bC/3/

You have to add ng-app="myApp" and angular.module('myApp', []); to bootstrap angular — Huei Tan
– Huei Tan, Commented Dec 24, 2013 at 3:31
the remaining number ie the tasks that are not strikentrhough is not working though? — user603007
– user603007, Commented Dec 24, 2013 at 4:56
Your code has logic error, your data done doesn't do the correctly . And also your input checkbox ng-model should like var.done — Huei Tan
– Huei Tan, Commented Dec 24, 2013 at 6:22

Awakening · Accepted Answer · 2013-12-24 04:15:24Z

1

simple demo can be like

<html ng-app>xxxxx</html>

don't forget "ng-app"

answered Dec 24, 2013 at 4:15

Awakening

3,8458 gold badges39 silver badges53 bronze badges

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

1 Comment

user603007 Over a year ago

the remaining number ie the tasks that are not strikentrhough is not working though?

allenhwkim · Accepted Answer · 2013-12-25 15:55:41Z

0

Several things

One. missed ng-app

Two. You should not repeating ul, but li

<li ng-repeat="var in myvar">
   <input type="checkbox" ng-model="var.done" /> 
   <span class="done-{{var.done}}">{{var.text}}</span>
</li>

Three. when you add, you need to have task name entered.

Four, you don't need remaining function. use filter

{{ (myvar | filter:{done:true}).length }}

http://jsfiddle.net/vc2bC/10/

edited Dec 25, 2013 at 15:55

answered Dec 24, 2013 at 8:23

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Comments

Hartman- · Accepted Answer · 2013-12-24 04:25:16Z

0

Darn, Awakening beat me to it... :/ But yeah, just simply move the ng-controller tag to a containing and put a ng-app tag on the html tag. Here:

enter code herehttp://jsfiddle.net/vc2bC/8/

answered Dec 24, 2013 at 4:25

Hartman-

1331 silver badge6 bronze badges

1 Comment

user603007 Over a year ago

the remaining number ie the tasks that are not strikentrhough is not working though?

Collectives™ on Stack Overflow

list not displaying in angular binding?

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related