Question

这是我的申请。

我输入药品名称，它将在<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])

      }



      });

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
}

添加，修改和删除angularJS中的条目

1 个答案: