Question

我想在ng repeat中显示复选框。复选框不会显示。根本不显示复选框。我不明白错误是什么。这是代码 -

<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>

和javascript代码 -

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
}
]
});

Answer 1

在声明时，您需要将空依赖项传递给您的模块，

将其更改为，

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

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

ng repeat angularjs中不显示复选框

1 个答案: