Question

我有两个问题。

1.此外，空值被添加到toDoList。

2.在尝试添加重复项目时，它不会添加确定。但是后来它也没有进一步添加任何项目。

还有一个默认项目添加了Sample。所以我不知道该怎么做。我也尝试通过空检查解决第一个问题。但仍然没有工作。

我没有对描述输入做任何事情，所以忽略它。这是我的script.js，index.htm和style.css文件。

＆＃13;

var app = angular.module('App', []);

app.controller('Ctrl', function($scope){

	$scope.item = ["Sample"];
	$scope.addTitle = function(){
				$scope.item.push($scope.addMe);
		
	};
	$scope.removeItem = function(index){
		$scope.item.splice(index,1);
	};
});

＆＃13;

body{
	maring:0;
	padding:0;
	font-family: 'Inconsolata', monospace;
}
.container{
	width: 100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.form{
	width:400px;
	height: auto;
	padding:20px;
}
.form input:nth-child(1){
	padding:10px;
	border:2px solid salmon;
	font-family: 'Inconsolata', monospace;
}
.form input:nth-of-type(2){

	padding:10px;
	border:2px solid salmon;
	font-family: 'Inconsolata', monospace;
	width:400px;
}

.form button{
	width:100px;
	height:40px;
	background-color: salmon;
	border:1px solid salmon;
	color:white;
	font-family: 'Inconsolata', monospace;
}
.form button:hover{
	color:salmon;
	background-color: white;
	cursor:pointer;
}
.itemList ul li{
	list-style: none;
}
.itemList ul li a{
	font-size: 0.8em;
	color:red;
	text-decoration: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>
<body>
	<div ng-app="App" class="container">
		<div ng-controller="Ctrl" class="form">
			<form>
				  <input type="text" name="title" placeholder="Title" ng-model="addMe" ng-required="true"><br><br>
				  <input type="text" name="description" placeholder="Description" ng-required="true"><br><br>
				  <button ng-click="addTitle()">Add</button>
				  <div class="itemList">
					  <ul ng-repeat="items in item">
						  <li>
							  {{items}}
		        			     <span ng-click="removeItem($index)"><br><a href="#">Remove</a></span>
		        	     </li>
					  </ul>
				  </div>
			</form>
		</div>
	</div>

</body>
</html>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
	<script src="script.js" type="text/javascript"></script>

＆＃13;

Answer 1

这是您示例中的working version

只是因为您正在添加addMe值，所以如果您想要拒绝空值，请在代码中添加该验证。

使用空字符串值启动addMe，在添加到item数组
之前检查当前值是否为空

使用track by $index解决重复问题

了解更多信息，请查看

希望这能回答你的问题..

Answer 2

检查真实性和长度。即。 item && item.length

要制作带有标题和描述的待办事项的模型，请将待办事项设为具有这两个属性的对象。

添加项目后，将待办事项模型重置为空对象。这样可确保将$scope.todoItem的变量引用更新为新对象。

＆＃13;

var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {

  $scope.items = [];
  $scope.todoItem = {title: '', description: ''};
  $scope.addTodoItem = function() {
    if (($scope.todoItem.title && $scope.todoItem.title.length) && ($scope.todoItem.description && $scope.todoItem.description.length)) {
      $scope.items.push($scope.todoItem);
      
      $scope.todoItem = {title: '', description: ''};
    }
    

  };
  $scope.removeTodoItem = function(index) {
    $scope.items.splice(index, 1);
  };
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
</head>

<body>
  <div ng-app="App" class="container">
    <div ng-controller="Ctrl" class="form">
      <form novalidate>
        <input type="text" name="title" placeholder="Title" ng-model="todoItem.title" ng-required="true"><br><br>
        <input type="text" ng-model="todoItem.description" name="description" placeholder="Description" ng-required="true"><br><br>
        <button ng-click="addTodoItem()">Add</button>
        <div class="itemList">
          <ul ng-repeat="item in items">
            <li>
              {{item.title}}
              <p>{{ item.description }}</p>
              <span ng-click="removeTodoItem($index)"><br><a href="#">Remove</a></span>
            </li>
          </ul>
        </div>
      </form>
    </div>
  </div>

</body>

</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

＆＃13;

Angularjs：添加到待办事项列表的空值

2 个答案: