CODEWITHSUNDEEP
javascriptangularjs
AMIT SINGH
AMIT SINGH

Reputation: 3

Angularjs:Empty value added to toDo List

I have two questions.

1.In addition, the empty value gets added to toDoList.

2.On trying to add a duplicate item, it doesn't add ok. But later it also doesn't add any item further.

There is also a default item added Sample. So I don't know how to do it.I also tried to solve the first problem by doing an empty check.But still is doesn't work.

I have not done anything with the description input so ignore it. This is my script.js, index.htm, and style.css file.

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>

Upvotes: 0

Views: 153

Answers (2)

Bassem Mamar
Bassem Mamar

Reputation: 328

this is a working version from your example

  1. simply because you are adding addMe value whatever it is, so if you want to deny empty values add that validation in your code.

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

  1. use track by $index to solve duplication issue

for more information check this out

hope this answer your questions..

Upvotes: 1

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38982

Check for truthiness and length. i.e. item && item.length

To make a model with todo items having title and description, make todo item an object with both properties.

Reset the todo model to an empty object when a item has been added. This makes sure to update the variable reference for $scope.todoItem to a new object.

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

Upvotes: 0

Related Questions