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

0

См. Изображение моей заявки

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

Я ввожу название лекарства, и оно будет записано в <li>.

У меня есть две проблемы.

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

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

Код выглядит следующим образом:

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])

      }



      });
  • 0
    Вместо изображения опубликуйте демо-план.
  • 0
    Разместите свой код в jsfiddle.net
Показать ещё 12 комментариев
Теги:
angularjs-scope
angularjs-ng-repeat

1 ответ

0

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

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
}
  • 0
    plnkr.co/edit/YGQXog9D66nWAAzarToF?p=preview
  • 0
    Проверьте это: plnkr.co/edit/YGQXog9D66nWAAzarToF?p=preview Когда я редактирую запись, она возвращается к форме, но вскоре она нажимает ввод нулевых значений, которые сохраняются ....
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню