Au cours des deux derniers jours, j'ai lu des documents officiels et des tutoriels trouvés en ligne pour apprendre des instructions personnalisées en angulaire.
La fonction que veut réaliser la commande définie ci-dessous est très simple. Cliquez sur - pour modifier la quantité du produit
Il y a quelques problèmes avec la fonction bouton d'ajout et de réduction du nombre de produits, et elle doit être améliorée
PS : En plus de pratiquer l'utilisation des attributs de la commande lors de l'écriture de cette commande, j'ai aussi je veux savoir comment utiliser le '=' '@' '&' dans le scope
J'ai lu l'explication dans le document officiel aujourd'hui, mais je ne la comprends toujours pas, alors j'ai décidé d'écrire un exemple pour voir
Écrit dans le panier, cliquez sur - Impossible de modifier la quantité ?
<!DOCTYPE html>
<html ng-app="myApp">
<head >
<meta charset="utf-8">
<title>angular directive tab选项卡</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
</head>
<body>
<shop-cart></shop-cart>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
$scope.datas = [
{name:'花生',price:14,number:1,addBtn:'+',reduceBtn:'-'},
{name:'牛奶',price:25,number:1,addBtn:'+',reduceBtn:'-'},
{name:'蛋糕',price:25,number:1,addBtn:'+',reduceBtn:'-'}
];
}])
.directive('shopCart',function() {
return {
restrict:'EA',
scope:{
onAdd:'&',
onReduce:'&'
},
templateUrl:'shop-cart.html',
controller: 'myCtrl',
link: function(scope,element,attr) {
scope.onAdd = function(num,index){
num =scope.datas[index].number + 1
scope.datas[index].number = num;
};
scope.onReduce = function(num,index){
if(num > 0) {
num =scope.datas[index].number - 1
scope.datas[index].number = num;
}
};
console.log(scope);
}
}
});
</script>
</body>
</html>
<table class="table table-striped" ng-controller="myCtrl">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>商品数量</th>
<th>增加商品数量</th>
<th>减少商品数量 </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in datas">
<td>{{data.name}}</td>
<td>{{data.price}}</td>
<td ng-model="data.number">{{data.number}}</td>
<td><a ng-click="onAdd(data.number,$index)">{{data.addBtn}}</a></td>
<td><a ng-click="onReduce(data.number,$index)">{{data.reduceBtn}}</a></td></td>
</tr>
</tbody>
</table>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
a=b signifie que la valeur de a prend la valeur de la variable b ;
a@b signifie que la valeur de a est la chaîne 'b'
a&b signifie que a fait référence à b, généralement ; utilisé pour mettre une fonction