изменить ввод данных в AngularJS

0

Когда я редактирую запись, она вернется к форме, но вскоре она попадет в нулевые значения.

Я не знаю, почему это происходит. Пожалуйста, проверьте, что это может быть связано с тем, что вы не нажимаете весь объект (название названия и имя) в свой список "cart", поэтому, когда вы извлекаете элемент для редактирования, вы не получаете все значения, вы получаете текст

Код здесь

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


      }


      });
Теги:
angularjs-scope
angularjs-directive
angularjs-ng-repeat

1 ответ

0

Кажется, вы не назначали правильные свойства в своей функции edit. Работает следующий код. Это использует ES6. Возможно, вам понадобится .find или .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>

Нажмите здесь, чтобы просмотреть демо (современные браузеры).

Поделиться
  • 0
    Спасибо @ m59 .... но значение не передается в текстовом поле при попадании в поле редактирования .....
  • 0
    @ SaurabhDellaRa'Man Упс. Обновлено.
Показать ещё 2 комментария

Ещё вопросы

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