| vanyabb | 03.04.2017 15:43 |
Как запретить добавление одинаковых значений в массив объектов ?
Как запретить добавление одинаковых значений в массив объектов ?
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="menuController">
<div class="container">
<h1>Tony's Pizza</h1>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Cheese Pizza ',11.99)"/> Cheese Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Pepperoni Pizza ',15.55)"/> Pepperoni Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Margherita Pizza ',11.22)"/> Margherita Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('BBQ Chicken Pizza ',12.55)"/> BBQ Chicken Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Combo Pizza ',12.55)"/> Combo Pizza</label>
</div>
<br>
<div ng-repeat="x in list">
<span ng-click="addTopping(x.titlex, x.descriptx)">{{ x.titlex }}{{ (x.descriptx) }}</span>
</div>
<h3 ng-show="model.toppings.length > 0">Selected Toppings</h3>
<div ng-repeat="t in model.toppings">
{{t.titley}}{{t.descripty}}<span ng-click="removeItem($index)" class="glyphicon glyphicon-remove"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller("menuController", [
"$scope",
function($scope) {
$scope.model = { title: "", toppings: []};
$scope.changeMainDish = function(name, price) {
$scope.list=[];
$scope.list.push({ titlex: name, descriptx: price });
};
$scope.addTopping = function (titl, desc){
$scope.model.toppings.push({ titley: titl, descripty: desc });
}
$scope.removeItem = function (x) {
$scope.model.toppings.splice(x, 1);
}
}
]);
</script>
</body>
</html>
Пробовал сделать методом
if (~$scope.model.toppings.indexOf(topping)) return;
не получилось, помогите разобраться !
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Tony's Pizza</title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="menuController">
<div class="container">
<h1>Tony's Pizza</h1>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Cheese Pizza ',11.99)"/> Cheese Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Pepperoni Pizza ',15.55)"/> Pepperoni Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Margherita Pizza ',11.22)"/> Margherita Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('BBQ Chicken Pizza ',12.55)"/> BBQ Chicken Pizza</label>
</div>
<div>
<label><input type="radio" name="category" ng-click="changeMainDish('Combo Pizza ',12.55)"/> Combo Pizza</label>
</div>
<br>
<div ng-repeat="x in list">
<span ng-click="addTopping(x.titlex, x.descriptx)">{{ x.titlex }}{{ (x.descriptx) }}</span>
</div>
<h3 ng-show="model.toppings.length > 0">Selected Toppings</h3>
<div ng-repeat="t in model.toppings">
{{t.titley}}{{t.descripty}}<span ng-click="removeItem($index)" class="glyphicon glyphicon-remove"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller("menuController", [
"$scope",
function($scope) {
$scope.model = { title: "", toppings: []};
$scope.changeMainDish = function(name, price) {
$scope.list=[];
$scope.list.push({ titlex: name, descriptx: price });
};
$scope.addTopping = function (titl, desc){
$scope.model.toppings.push({ titley: titl, descripty: desc });
}
$scope.removeItem = function (x) {
$scope.model.toppings.splice(x, 1);
}
}
]);
</script>
</body>
</html>
Пробовал сделать методом
if (~$scope.model.toppings.indexOf(topping)) return;
не получилось, помогите разобраться !