角度JS拼接不工作
Angular JS splice not working
我在products.json中有我的数据，如下所示：
{
"products":[
{
"name":"Antricot de vita",
"calorii":236,
"proteine":17.4,
"lipide":18.5,
"carbohidrati":0,
"fibre":0
},
{
"name":"Muschi de vita crud",
"calorii":215,
"proteine":19,
"lipide":15,
"carbohidrati":0,
"fibre":0
},
{
"name":"Albus de ou",
"calorii":52,
"proteine":10.9,
"lipide":0.2,
"carbohidrati":0.7,
"fibre":0
}
]
}
所以，正如你所看到的，我有一个名为乘积的数组，它带有一些对象，每个对象都有6个属性。我有一个表，其中每个tr都有6个td，具有上面提到的属性。单击每个tr右侧的按钮时，我希望删除该tr。当我不得不从表中删除一个元素时，就会出现问题。我试过一个拼接功能，但似乎不起作用。请帮我解决这个问题。非常感谢！PS：推送功能确实有效！
以下是我的代码：app.js
var app = angular.module('Calorii', []);
app.factory('products', ['$http', function($http) {
return $http.get('products.json')
.success(function(data) {
return data;
})
.error(function(data) {
console.log("error");
return data;
});
}]);
app.controller('HomeController', ['$scope', 'products', function($scope, products) {
products.success(function(data) {
$scope.produse = data;
$scope.predicate = 'name';
$scope.reverse = false;
$scope.order = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.removeItem = function(item) {
var index = $scope.produse.products.indexOf(item);
$scope.produse.products.splice(index, 1);
};
$scope.add = function() {
if (angular.isDefined($scope.name) && $scope.name != '' && $scope.calorii >= 0 &&
$scope.proteine >= 0 && $scope.lipide >= 0 && $scope.carbohidrati >= 0 &&
$scope.fibre >= 0) {
$scope.produse.products.push({
name: $scope.name,
calorii: $scope.calorii,
proteine: $scope.proteine,
lipide: $scope.lipide,
carbohidrati: $scope.carbohidrati,
fibre: $scope.fibre
});
$scope.name = '';
$scope.calorii = '';
$scope.proteine = '';
$scope.lipide = '';
$scope.carbohidrati = '';
$scope.fibre = '';
} else {
alert("Unul sau mai multe spatii nu a fost completat");
}
};
});
}]);
app.directive('myElement', function() {
return {
scope: {
item: '=myElement'
},
restrict: 'EA',
template: '<td class="left">{{ item.name }}</td><td>{{ item.calorii }}</td><td class=>{{ item.proteine }}</td><td class>{{ item.lipide }}</td><td class=>{{ item.carbohidrati }}</td><td class=>{{ item.fibre }}</td><td><button ng-click="removeItem(product)"><img src="images/remove.png"/></button></td>'
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Calorii</title>
<script src="js/shared/angular.js"></script>
<script src="js/shared/jquery-2.2.2.min.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body ng-app="Calorii" ng-controller="HomeController">
<div class="main">
<div id="header">
<img src="images/kilocalorii-logo.png">
<ul id="nav">
<li id="menulink"><a href="index.html" title="Tabelul de calorii"></a></li>
<li id="genlink"><a href="#" title="Despre tabelul de calorii"></a></li>
<li id="searchspot">
<form id="searchform" class="searchform">
<input id="s" type="search" ng-model="query">
</form>
</li>
</ul>
<div id="rapidfindlabel"></div>
</div>
<div class="content">
<a href="#" class="noSort" ng-click="predicate=''">Doresc tabelul nesortat</a>
<table class="tabelcalorii">
<tbody>
<tr>
<th class="left">
<a href="#" class="sort" ng-click="order('name')">Aliment</a>
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="#" class="sort" ng-click="order('calorii')">Calorii</a>
<span class="sortorder" ng-show="predicate === 'calorii'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="#" class="sort" ng-click="order('proteine')">Proteine</a>
<span class="sortorder" ng-show="predicate === 'proteine'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="#" class="sort" ng-click="order('lipide')">Lipide</a>
<span class="sortorder" ng-show="predicate === 'lipide'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="#" class="sort" ng-click="order('carbohidrati')">Carbohidrati</a>
<span class="sortorder" ng-show="predicate === 'carbohidrati'" ng-class="{reverse:reverse}"></span>
</th>
<th>
<a href="#" class="sort" ng-click="order('fibre')">Fibre</a>
<span class="sortorder" ng-show="predicate === 'fibre'" ng-class="{reverse:reverse}"></span>
</th>
<th>Scoate din lista</th>
</tr>
<tr ng-repeat="product in produse.products | orderBy:predicate:reverse | filter:query" my-element="product"></tr>
</tbody>
</table>
<p class="more"><strong>Nota:</strong> Toate valorile nutritive sunt calculate pentru o cantitate de 100g.</p>
<p style="margin-left:5px">Daca nu ai gasit alimentul cautat, adauga-l completand tabelul de mai jos:</p>
<table cellspacing="1" cellpadding="4" width="100%" class="add_table">
<tbody>
<tr>
<td class="add_name"><b>Aliment:</b></td>
<td class="add_value"><input type="text" ng-model="name" placeholder="Introdu numele alimentului" style="width: 215px"><br></td>
<td><span class="sugestie">exemplu: <b>Pate de porc cu verdeturi Bucegi</b></span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Calorii:</b></td>
<td class="add_value"><input type="number" ng-model="calorii" placeholder="Introdu numarul de calorii" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de calorii este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Proteine:</b></td>
<td class="add_value"><input type="number" ng-model="proteine" placeholder="Introdu numarul de proteine" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de proteine este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Lipide:</b></td>
<td class="add_value"><input type="number" ng-model="lipide" placeholder="Introdu numarul de lipide" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de lipide este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Carbohidrati:</b></td>
<td class="add_value"><input type="number" ng-model="carbohidrati" placeholder="Introdu numarul de carbohidrati" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de carbohidrati este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Fibre:</b></td>
<td class="add_value"><input type="number" ng-model="fibre" placeholder="Introdu numarul de fibre" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de fibre este obligatorie</span></td>
</tr>
<button class="submit" ng-click="add()">ADAUGA</button>
</tbody>
</table>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
</body>
</html>
我知道上面有很多代码，但如果你不介意的话，如果你能简要解释一下如何在我的json产品上调用splice函数，我将不胜感激。再次感谢！
indexOf有时无法在数组中找到对象的索引。要么你用lodash或下划线来做，要么改变你的方法：
<td><a ng-click="removeItem($index)">Remove</a></td>
Ctrl
$scope.removeItem = function(index) {
$scope.produse.products.splice(index, 1);
}
在angular中使用ng repeat时，$index可用。
myElement指令有问题。
ng-click="removeItem(product)"
应该是
ng-click="removeItem(item)".
相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 角度JS拼接不工作
- 每个环路的拼接工作不正常
- 拼接只是工作的一部分时间
- 拼接没有按照我预期的方式工作
- 为什么拼接不能在angular js中正常工作
- Javascript数组拼接无法正常工作
- 拼接功能在这里是如何工作的
- Nodejs拼接JSON元素不能很好地工作
- JavaScript拼接无法正常工作
