修改AngularJS中的数据输入

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

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

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


     } 


     });

来源

2015-10-29 Saurabh Della Ra' Man

看来你不分配请在edit函数中使用正确的属性。以下代码正在工作。这使用ES6。您可能需要垫片.find或以其他方式迭代，但主要是使用$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>

Click here for live demo (modern browsers).

来源

2015-10-29 13:05:23 m59

感谢@ M59 ....但价值并不在文本框中通过同时击中编辑框中..... –

@ SaurabhDellaRa'Man哎呀。更新。 – m59

谢谢@ m59 ....你是天才......！非常感谢您 –

修改AngularJS中的数据输入

回答

相关问题