Question

当我正在编辑条目时，它将返回到表单但很快就会命中输入，正在保存空值。

我不知道为什么会这样。请检查我认为这可能是因为您没有将整个对象（名称标题和名称值）推送到“购物车”列表，因此在检索要编辑的项目时，您没有获得所有值，您只能获得文本

HTML

<html ng-app="myApp">
<head >
    <title>
        JustRelief | e-store
    </title>

   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">



 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>

<script type="text/javascript" src="script.js"></script>

 <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
  .typeahead-demo .custom-popup-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    background-color: #f9f9f9;
  }

  .typeahead-demo .custom-popup-wrapper > .message {
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    color: #868686;
  }

  .typeahead-demo .custom-popup-wrapper > .dropdown-menu {
    position: static;
    float: none;
    display: block;
    min-width: 160px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
</style>


</head>
<body ng-controller="NameCtrl">
<div id="section1">

    <div class="nav1">
        <img src="img/logo1.png" class="logo">

        <div id="bars">
            <a  class="fa fa-bars  white " data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"
            ></a>
        </div>
                </div>
        <div class="collapse" id="collapseExample">
  <div class="well">
   <ul class="list-unstyled list ">
        <li><a href="#" class="list-txt"><span class="fa fa-map-marker"></span> Track Orders</a></li>
        <li><a href="#" class="list-txt"><span class="fa fa-book    "></span> Complaints</a></li>
        <li><a href="#" class="list-txt"><span class="fa fa-comment "></span> Feedback</a></li>
        <li><a href="#" class="list-txt"><span class="fa fa-user    "></span> Customer Care</a></li>
   </ul>
  </div>
</div>








<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" uibtypeahead="state as state.x for state in states | filter:{x.$viewValue}" ng-model="enteredName" id="tags"/> -->


 <input type="text" ng-model="enteredName" placeholder="Custom template" uib-typeahead="state as state.w for state in states | filter:{w:$viewValue}" id="tags"/ >


                <p>{{enteredName.w}}</p>
                <p ng-model="e1">{{enteredName.p}}</p>

            </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" >


<div>
<p class="tt" ng-repeat="name in names">{{name.x1}}  x {{name.qty}} = Rs.{{name.p1 * name.qty}}

<a class="fa fa-close tt1" ng-click="removeName(name)"> Remove</a>
            <a class="fa fa-edit tt1" ng-click="edit(name)"> Edit</a></p></div>





    <div>







        </div>              
    </div>

</div>




</div>








<div id="section2"></div>


</body>
</html>

控制器：

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


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

  $scope.selected = undefined;
  $scope.states = [
 {"w":"Combiflame", "p":"45"},
{"w":"Crocine", "p":"50"},
{"w":"Alphine", "p":"52"},
{"w":"Nitro", "p":"71"},
{"w":"Betnisol", "p":"79"},
{"w":"Daily Dose", "p":"88"},
{"w":"EyeTone", "p":"95"},
{"w":"Kyrotop", "p":"101"}


];

console.log($scope.states[1].x)


if($scope.ww != ''){
         $scope.names = [


        ];}
        else{

        }


        $scope.addName = function() {

    console.log (  $scope.names)    

if($scope.ww != ''){



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

            $scope.enteredName = [];
 $scope.ww = '';
 $scope.tp = '';


}else
{

}



        };

        $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.w =  $scope.enteredName 

   $scope.enteredName    = name.x1; 
    $scope.sel = name.tp;
    $scope.ww = name.qty;

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


      }


      });

Answer 1

您似乎没有在.find函数中分配正确的属性。以下代码正在运行。这使用ES6。您可能需要填充$scope.states或以其他方式迭代，但主要是使用$scope.edit = function(name, idx){ // assign the matching item from `$scope.states` $scope.enteredName = $scope.states.find((item) => item.p === name.p1); $scope.sel = name.tp; $scope.ww = name.qty; $scope.names.splice(idx, 1); }中的正确项目。

$index

我还通过从模板中传递edit来优化您的代码。您无需在<a class="fa fa-edit tt1" ng-click="edit(name, $index)"> Edit</a>函数中计算它。

{{1}}

Click here for live demo (modern browsers).

修改AngularJS

1 个答案: