Добавить, изменить и удалить запись в angularJS

Question

Please see the image of my application

Это мое приложение.

Я ввожу название медицины, и оно будет записано в <li> предметах.

У меня есть 2 вопроса.

Во-первых: Когда я нажимаю кнопку «Добавить» без ввода каких-либо данных, нулевые значения сохраняются, что я не хочу, я хочу, чтобы отображалось предупреждение.

Во-вторых: всякий раз, когда я хочу редактировать данные, он должен повторно вводить в соответствующие файлы формы, и я могу редактировать и сохранять.

код следующим образом:

HTML:

<div class="container-fluid "> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12 center1"> 
      <div class="col-xs-12 "> 
       <h4 class="text-center txtC1">Enter your medicines</h4> 
      </div> 

      <div class="col-xs-12 col-sm-12 text-center"> 
       <input type="text" ng-model="enteredName" id="enter"/> 
      </div> 
<br/>&nbsp 
      <div class="col-xs-12 col-sm-12 text-center "> 




<p class="rr txtC2">Type</p> 
<div class="rr"> 
        <select id="dd" ng-model="sel"> 
         <option value="Days">Days</option> 
         <option value="Tabs">Tab</option> 
         <option value="Packs">Pack</option> 
        </select> 



</div> 
<p class="rr txtC2">Qty</p> 

       <input type="number" class="rr" ng-model="ww" id="dd"/> 



      </div> 


    <br/>&nbsp 
      <div class="col-xs-12 col-sm-12 text-center "> 

       <button id="btn2" ng-Click="addName()">Add</button> 
       <button id="btn2">Order</button> 
      </div>  




    <br/>&nbsp 

<div class="col-xs-12"> 
<p class="txtC1">Cart<hr></p> 
</div> 

<div class="col-xs-12 dd1" > 

    <ul class="list-unstyled" > 
     <li class="tt" ng-repeat="name in names">{{name.x1}} x {{name.tp}} x {{name.qty}} 

<span class="fa fa-close tt1" ng-click="removeName(name)"></span> 
      <span class="fa fa-edit tt1" ng-click="edit(name)"></span></li> 

    </ul> 


    <div> 







    </div>    
</div> 

Контроллер

var app = angular.module('myApp', []); 


app.controller('NameCtrl', function ($scope){ 
     $scope.names = [ 

     ]; 

     $scope.addName = function() { 

      $scope.names.push({'x1':$scope.enteredName,'tp':$scope.sel,   'qty':$scope.ww}); 



      $scope.enteredName = ''; 

$scope.ww = ''; 
$scope.tp = ''; 

console.log($scope.sel) ;   
     }; 

     $scope.removeName = function(name) { 
      var i = $scope.names.indexOf(name); 
      $scope.names.splice(i, 1); 
     }; 

     $scope.edit = function(name){ 

      var i = $scope.names.indexOf(name); 

     $scope.enteredName = ($scope.names[i]); 

      $scope.names.splice(i, 1); 

      console.log($scope.enteredName[i]) 

     } 



     }); 

Answer 1

Измененное имя и прочее для того, чтобы иметь смысл для меня, но это работает (редактирование и удаление, не предупредит, когда пусто)

HTML:

<div ng-app="myApp" ng-controller="NameCtrl"> 

<h4 class="text-center txtC1">Enter your medicines</h4> 
<input type="text" ng-model="item.name" id="enter"/> <br> 

<b>Type</b> <br> 
<select ng-model="item.type"> 
    <option value="Days">Days</option> 
    <option value="Tabs">Tab</option> 
    <option value="Packs">Pack</option> 
</select> <br> 

<b >Amount</b> <br> 
<input type="number" class="rr" ng-model="item.amount" /> <br> 

<hr> 

<button id="btn2" ng-Click="addItem()">Add</button> 
<button id="btn2">Order</button> <br> 

<hr> 

<b >Cart</b> 

<ul> 
    <li ng-repeat="item in items">{{item.name}} : {{item.type}} : {{item.amount}} 
     <a class="fa fa-close tt1" ng-click="deleteItem($index)">remove</a> 
     <a class="fa fa-edit tt1" ng-click="edit(item)">edit</a> 
    </li> 
</ul> 

Контроллер:

var app = angular.module('myApp', []); 


app.controller('NameCtrl', function ($scope){ 
    $scope.items = []; 
    $scope.item = { 
     name: '', 
     type: '', 
     amount: '' 
    }; 

    $scope.addItem = function() { 
     $scope.items.push($scope.item); 

     $scope.item = { 
      name: '', 
      type: '', 
      amount: '' 
     }; 
    }; 

    $scope.deleteItem = function(index) { 
     $scope.items.splice(index, 1); 
    }; 

    $scope.edit = function(item, index){ 
     $scope.item = item; 
     $scope.items.splice(index, 1); 
    }; 
}); 

Обновление: Для предупреждения вы можете сделать что-то вроде этого:

$scope.addItem = { 

// checks if any of item name, type or amount is an empty string ('') 
// and if it is, show alert message 
if ($scope.item.name == '' || $scope.item.type == '' || $scope.item.amount == '') { 
    alert('Fill in all fields'); 
} else { 
    // function to add item to items 
}