Question

点击房间ListView(_wrappedItems)时，点击+时会添加和删除成人和子元素。

我希望附加的元素具有与加载页面时存在的Adult和Child元素相同的功能和值。就像给附加元素提供相同的-和ng-click一样。

我已将ng-value和ng-value添加到我追加它们的位置，但它们不起作用。我做错了什么。

ng-click

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope){
  
    $scope.room = 1;
    $scope.price = 2500;
    $scope.adult = 1;
    $scope.child = 0;


  
    $scope.minusRoom = function(){
      if($scope.room > 1){
      $scope.room--;
        $scope.price = $scope.price - 2500;
        var div = document.querySelector('div');
        var rows = div.querySelectorAll('.spanrow')                    
        var last = rows[rows.length - 1];
        div.removeChild(last);
      }
    }
    $scope.addRoom = function(){
      if($scope.room < 10){
        $scope.room++;
        $scope.price = $scope.price + 2500;
        
         var myEl = angular.element( document.querySelector( 'div' ) );
            
        myEl.append('<span class="spanrow">Adult: <input type="button"value="-" ng-click=minusAdult()></input><input type="text" ng-value="{{room}}" readonly="readonly"><input type="button" value="+" ng-click=addAdult()> Child:<input type="button"value="-"></input><input type="text" ng-value="room" readonly="readonly"><input type="button" value="+"><span><br/>');
       }
      
    }
    
    $scope.minusAdult = function(){
      if($scope.adult > 1){
      $scope.adult--;
        if($scope.adult == 2){
        $scope.price = $scope.price - 400;
        }
      }
    }
    
    $scope.addAdult = function(){
      if($scope.adult < 3){
      $scope.adult++;
        if($scope.adult == 3){
        $scope.price = $scope.price + 400;
        }
      }
    }
    
    $scope.minusChild = function(){
      if($scope.child > 0){
      $scope.child--;
        if($scope.child == 1){
        $scope.price = $scope.price - 200;
        }
      }
    }
    
    $scope.addChild = function(){
      if($scope.child < 2){
      $scope.child++;
        if($scope.child == 2){
        $scope.price = $scope.price + 200;
        }
      }
    }
    
});

Answer 1

您需要添加ng-repeat才能显示成人和儿童

<强> HTML

<html ng-app='myApp'>

<body ng-controller="ctrl1">
    <div>
        <div>Room:
            <input type='button' value='-' ng-click=minusRoom()>
            <input type='text' ng-value="room.length" readonly="readonly">
            <input type='button' value='+' ng-click=addRoom()>
        </div>
    </div>
    <br>
    <div ng-repeat="data in room">
        <div> Adult:
            <input type='button' value='-' ng-click=minusAdult(data)>
            <input type='text' ng-value="data.adult" readonly="readonly">
            <input type='button' value='+' ng-click=addAdult(data)>
        </div>
        <div> Child:
            <input type='button' value='-' ng-click=minusChild(data)>
            <input type='text' ng-value="data.child" readonly="readonly">
            <input type='button' value='+' ng-click=addChild(data)>
        </div>
        <br>
    </div>
    <h3>{{price}}</h3>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>

<强>控制器

var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope) {

    $scope.room = [{
        adult: 0,
        child: 0
    }];
    $scope.price = 2500;
    $scope.adult = 1;
    $scope.child = 0;



    $scope.minusRoom = function(index) {
        if ($scope.room.length > 1) {
            $scope.room.splice(index, 1);
            $scope.price = $scope.price - 2500;
        }
    }
    $scope.addRoom = function() {
        if ($scope.room.length < 10) {
            $scope.room.push({
                adult: 0,
                child: 0
            });
            $scope.price = $scope.price + 2500;
        }

    }

    $scope.minusAdult = function(data) {
        if (data.adult > 1) {
            data.adult--;
            if (data.adult == 2) {
                $scope.price = $scope.price - 400;
            }
        }
    }

    $scope.addAdult = function(data) {
        if (data.adult < 3) {
            data.adult++;
            if (data.adult == 3) {
                $scope.price = $scope.price + 400;
            }
        }
    }

    $scope.minusChild = function(data) {
        if (data.child > 0) {
            data.child--;
            if (data.child == 1) {
                $scope.price = $scope.price - 200;
            }
        }
    }

    $scope.addChild = function(data) {
        if (data.child < 2) {
            data.child++;
            if (data.child == 2) {
                $scope.price = $scope.price + 200;
            }
        }
    }

});

如何使附加元素具有与当前元素相同的功能

1 个答案: