產(chǎn)品列表
例子代碼:
<ul class="box">
<li><a ng-click="showpop('cccc1')" class="pointer">cccc1</a></li>
<li ><a ng-click="showpop('cccc2')" class="pointer">cccc2</a></li>
</ul>
ng-click 為點(diǎn)擊事件
showpop(pid) 調(diào)用彈出層的方法.具體代碼如下
pid : json文件名 例: showpop('cccc1')
//彈出層(主要用來選擇商品的參數(shù))
$scope.showpop = function(pid){
$http.get("/product/"+pid+".json")
.success(function (response) {
$scope.data =response;
$scope.set=null;
var item=new Array();
for(x in response){
if(typeof(response[x])=='object') item[x]=response[x].data[0];
}
$scope.set=item;
});
};
彈出層
<h1>產(chǎn)品參數(shù)</h1>
<div class="pop box">
<h2>
{{data.title}}
{{data.price}}
</h2>
尺寸:<select ng-model="set.size" ng-options="x for (y, x) in data.size.data"></select>
顏色:<select ng-model="set.color" ng-options="x for (y, x) in data.color.data"></select>
<a ng-click="addcart()" class="pointer">addcart</a>
</div>
彈出層的數(shù)據(jù)為data
具體data中的參數(shù)請(qǐng)參考json文件的數(shù)據(jù)
數(shù)據(jù)填充:格式為{{XXXX}}
<!--html code-->
{{data.title}}
<!--結(jié)果-->
cccc1
<!--data中沒有數(shù)據(jù)則無數(shù)據(jù)輸出-->
下拉選擇參數(shù):
例:
<!--html code-->
<select ng-model="set.size" ng-options="x for (y, x) in data.size.data"></select>
-
ng-model:指令綁定了 HTML 表單元素到,如set.size,set.后面帶參數(shù)如"size" -
ng-options: 填充參數(shù)選項(xiàng).例:x for (y, x) in data.size.data這里size可以換成別的參數(shù) -
addcart()為添加到購(gòu)物車的函數(shù)
<a ng-click="addcart()" class="pointer">addcart</a>
購(gòu)物車列表數(shù)據(jù)填充
<h1>購(gòu)物車列表</h1>
<div class="cart box">
<ul>
<!--循環(huán)-->
<li ng-repeat="x in cartlist">
{{x.title}}
<!--購(gòu)物車產(chǎn)品數(shù)量-->
<input type="text" ng-model="cartlist[$index].count" ng-mouseleave="cartchange($index)"/>
<a ng-click="cartdelete($index)" class="pointer">del</a>
</li>
</ul>
<p>用戶名:<input type="text" ng-model="user.name" /></p>
<p>郵箱:<input type="text" ng-model="user.email"/></p>
<p>地址:<input type="text" ng-model="user.adress"/></p>
<a ng-click="checkout()" class="pointer">提交</a>
</div>
-
ng-repeat循環(huán)方法cartlist為 購(gòu)物車列表 -
user用戶提交數(shù)據(jù)的集合,用法:user.name用戶名 -
ng-mouseleave鼠標(biāo)離開事件
