Angularjs:Empty value added to toDo List

Question

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>

Possible duplicate of [Angular ng-repeat Error "Duplicates in a repeater are not allowed."](https://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in-a-repeater-are-not-allowed) — Aref Zamani, Dec 20 '17 at 06:54

score 1 · Accepted Answer · answered Dec 20 '17 at 06:40

1

this is a working version from your example

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

use track by $index to solve duplication issue

for more information check this out

hope this answer your questions..

answered Dec 20 '17 at 06:40

Bassem Mamar

328
2
14

Thank you.But I don't want duplicate values for add up.It adds duplicate value also. – AMIT SINGH Dec 20 '17 at 06:44
sorry i thought you accept duplication, any way again it's another validation .. this is updated version https://jsfiddle.net/BassemMamar/02wu0v49/4/ – Bassem Mamar Dec 20 '17 at 06:52
will you explain me this $scope.item.indexOf($scope.addMe) === -1 – AMIT SINGH Dec 20 '17 at 07:16
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf – Bassem Mamar Dec 20 '17 at 07:17

Oluwafemi Sule · Answer 2 · 2017-12-20T06:31:37.373

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>

Sorry, You changed the variable names.I didn't notice.Thankyou. — AMIT SINGH, Dec 20 '17 at 06:57

Angularjs:Empty value added to toDo List

2 Answers2