Блог

Главная - Вопросы по программированию - Как значение передается внутри indexOf()?

Как значение передается внутри indexOf()?

#angularjs

#angularjs

Вопрос:

В этом коде ‘m’ записывается внутри функции indexOf. Но нигде в коде значение не передается. Я не могу понять, как это ‘m’ удаляет нужный элемент в ng-repeat. Когда я меняю ‘m’ на что-то другое, теперь это работает. Я новичок в AngularJS. В main.js файл, в котором есть функция removeitem, я получаю оттуда, откуда поступает значение ‘m’, оно уже передано откуда угодно.nt. Я пытался удалить ‘m’, но это не работает, он удаляет последний элемент.

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

app.controller('cont', function($scope) {
  $scope.invoice = {
    number: 10,
    tax: 14,
    items: [{
      description: "",
      quentity: 10,
      cost: 300

    }],
  };
  $scope.currency_symbol = [{

      name: 'Indian Rupee',
      currency: '₹'
    },
    {
      name: 'USD',
      currency: '$'
    },
    {
      name: 'Euro',
      currency: '€'
    }
  ];
  $scope.addItem = function() {
    $scope.invoice.items.push([{
      description: "description",
      quentity: 1,
      cost: 1

    }]);
  }

  $scope.removeItem = function(m) {
    $scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
  }


  $scope.subTotal = function() {
    var total = 0.0;
    angular.forEach($scope.invoice.items, function(item, key) {
      total  = item.quentity * item.cost;
    });
    return total;
  };
  $scope.calcuteTax = function() {
    return (($scope.subTotal() * $scope.invoice.tax) / 100);
  };
  $scope.grandTotal = function() {
    return ($scope.subTotal()   $scope.calcuteTax());

  };
});  
 <head>
  <title>Simple Invoicing - Built with AngularJS </title>
  <meta charset='utf-8'>
  <meta name="description" content="AngularJS and Angular Code Example for creating Invoices and Invoicing Application">
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="cont">
  <div class="container" width="800px" id="invoice">
    <div class="row">
      <div class="col-xs-12 heading">
        <strong>Billing System</strong>
      </div>
    </div>

  </div>
  <div class="main1">
    <div="customer">
      <select ng-init="currencySymbol=currency_symbol[0]" ng-model="currencySymbol" ng-options="currency.name ' ' currency.currency for currency in currency_symbol"></select>
  </div>
  </div>
  <div class="main2">
    <table border=1 width=100%>
      <th></th>
      <th>Description</th>
      <th>Quantity</th>
      <th>Cost{{' ' currencySymbol.currency}}</th>
      <th>Total</th>
      <tr ng-repeat="item in invoice.items">
        <td text-align="center">
          <a class="btn" href="" ng-click="removeItem()">
            <strong>[x]</strong>
          </a>
        </td>
        <td><input type="text" ng-model="item.description" placeholder="Description"></td>
        <td><input type="number" ng-model="item.quentity" placeholder="10"></td>
        <td><input type="number" ng-model="item.cost" placeholder="10"></td>
        <td placeholder="0">{{item.quentity*item.cost}}</td>
      </tr>
      <tr>
        <td text-align="center"><a class="btn" style="background-color:green;" href ng-click="addItem()">[ ]</a></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td text-align="center"></td>
        <td></td>
        <td></td>
        <td>Sub Total:</td>
        <td>
          <p>{{subTotal()}}</p>
        </td>
      </tr>
      <tr>
        <td text-align="center"></td>
        <td></td>
        <td></td>
        <td>Tax:<input type="number" ng-model="invoice.tax"></td>
        <td>
          <p>{{calcuteTax()}}</p>
        </td>
      </tr>
      <tr>
        <td text-align="center"></td>
        <td></td>
        <td></td>
        <td>Grand Total:</td>
        <td>
          <p>{{grandTotal()}}</p>
        </td>
      </tr>
    </table>
  </div>
</body>

Комментарии:

1. Этого не должно быть. Возможно, вы смотрите не в то место.

2. ` $scope.removeItem = функция(m){ $scope.invoice.items.splice($scope.invoice.items.indexOf(m),1); } `

3. Я преобразовал ваш код в доступный для выполнения фрагмент, и он удаляет последний элемент.

4. На самом деле это нормально, он удаляет последний элемент, проверка не выполняется, поэтому, когда indexOf значение не найдено в массиве, оно возвращается -1 , что для splice означает «первый элемент, считая с конца»

5. Как мне заставить код удалить элемент, на который я нажимаю?

Ответ №1:

Как мне заставить код удалить элемент, на который я нажимаю?

Добавить item в качестве аргумента в removeItem функцию:

   <tr ng-repeat="item in invoice.items">
    <td text-align="center">
      ̶<̶a̶ ̶c̶l̶a̶s̶s̶=̶"̶b̶t̶n̶"̶ ̶h̶r̶e̶f̶=̶"̶"̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶r̶e̶m̶o̶v̶e̶I̶t̶e̶m̶(̶)̶"̶>̶
      <a class="btn" href="" ng-click="removeItem(item)">
        <strong>[x]</strong>
      </a>
    </td>
  
  $scope.removeItem = function(m) {
    $scope.invoice.items.splice($scope.invoice.items.indexOf(m), 1);
  }