这是一个很简单的问题，但我无法解决。
我正在尝试开发一个 Angular ToDo 应用程序，该应用程序当前在单击添加按钮后添加任务，但不会将实际文本从输入推送到列表。它将一个项目添加到列表中，但不添加文本。
代码笔:http://codepen.io/anon/pen/Mpepzy .
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Nick Cook">
<meta name="author" content="Nick Cook">
<title>NC - Angular Project - ToDo App</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,900|Open Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="todoApp">
<main>
<md-content layout="row">
<md-card class="md-padding" ng-controller="todoController">
<div><md-card-title>
<md-card-title-text>
<span class="md-headline">ToDo List</span>
<span class="md-subhead">AngularJS Material Application</span>
</md-card-title-text>
</md-card-title></div>
</md-card-title></div>
<form class="md-padding">
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Add New Task</label>
<input type="text" ng-model="taskName" size="50">
</md-input-container>
</div>
<md-button ng-click="addTask()" class="md-raised md-primary">ADD</span></md-button>
</form>
<md-list class="md-padding">
<md-subheader class="md-no-sticky">Current Tasks</md-subheader>
<md-list-item ng-repeat="task in taskList">
<p>{{task.name}}</p>
<md-checkbox class="md-secondary" ng-model="task.completed"></md-checkbox>
</md-list-item>
</md-list>
<md-card-actions layout="row" class="md-padding">
<md-menu flex>
<md-button ng-click="$mdOpenMenu($event)" class="md-raised md-primary" aria-label="Menu"><span class="fa fa-gear fa-lg"></span></md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click="ctrl.menuItemClick($index)">
<div layout="row">
<p flex>Page One</p>
</div>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="ctrl.menuItemClick($index)">
<div layout="row">
<p flex>Page Two</p>
</div>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="ctrl.menuItemClick($index)">
<div layout="row">
<p flex>Page Three</p>
</div>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-actions>
</md-card>
</md-content>
</main>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="js/app.js"></script>
</body>
JS:
var app = angular.module('todoApp', ['ngMaterial']);
function menuController ($scope, $mdDialog) {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
};
app.controller('todoController', function($scope) {
$scope.taskList = [];
$scope.addTask = function() {
$scope.taskList.push($scope.taskName);
};
});
最佳答案
在ng-repeat中，您尝试渲染task的name属性。
这并不存在。 taskList 是一个字符串数组。
<md-list-item ng-repeat="task in taskList">
<p>{{task.name}}</p> <---- there is no 'name' property of task
<!-- md-checkbox -->
</md-list-item>
解决方案: 将一个对象插入任务列表数组。例如
$scope.taskList.push({name: $scope.taskName});
关于javascript - AngularJS 待办事项列表应用程序 - 正在添加到列表而无需输入文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42597187/