时间戳

首页 > 解决方案 > 值如何在 indexOf() 中传递？

angularjs - 值如何在 indexOf() 中传递？

问题描述

在这段代码中，'m' 写在 indexOf 函数中。但是在代码中没有传递值的位置。我无法理解这是如何在 ng-repeat 中删除正确的项目。当我将“m”更改为其他内容时，它现在正在工作。我是 AngularJS 的新手。在 main.js 文件中有 removeitem 函数，我从 'm' 的值的来源获取，它已经从任何地方传递。我尝试删除'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>

标签： angularjs

解决方案

如何使代码删除我单击的项目？

添加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);
  }

推荐阅读