javascript - ng repeat angularjs 中不显示复选框

标签 javascript html angularjs checkbox

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

最佳答案

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

改成,

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

演示

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>

关于javascript - ng repeat angularjs 中不显示复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43458052/

相关文章:

javascript - 创建一个函数并将其返回值分配给一个变量

javascript - 如何让 JavaScript 设置这些元素值?

html - 使用 css 进行星级评定 - 如何将文本值与图标对齐,以便它们具有相同的高度和大小

angularjs - Angular Bootstrap UI Accordion 未按预期工作

javascript - 为什么 'delete' 在 javascript 中很慢?

javascript - D3.js 从圆形到三 Angular 形的可视化

javascript - 如何显示/隐藏选定的对象,如div?

html - 如何排除 wp_nav_menu( array(?

javascript - angularjs 是否适合大型以数据为中心的企业 Web 应用程序

javascript - 注册可从 AngularJS 中的 VIews 访问的全局变量