gpt4 book ai didi

javascript - Angularjs:将空值添加到待办事项列表中

转载 作者:行者123 更新时间:2023-12-03 02:50:17 25 4
gpt4 key购买 nike

我有两个问题。

1.此外,空值会添加到 toDoList 中。

2.在尝试添加重复项目时,添加失败。但后来它也不再添加任何项目。

还有一个默认添加的项目 Sample。所以我不知道该怎么做。我也尝试通过做空支票来解决第一个问题。但仍然不起作用。

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

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

最佳答案

这是一个working version从你的例子

  1. 只是因为您要添加 addMe 值,无论它是什么,所以如果您想拒绝空值,请在代码中添加该验证。

initiate addMe with empty string value, check if current value is NOT empty before adding to item array

  • 使用track by $index解决重复问题
  • for more information check this out

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

    关于javascript - Angularjs:将空值添加到待办事项列表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47899658/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com