产品列表
例子代码:
<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 为点击事件
showpop(pid) 调用弹出层的方法.具体代码如下
pid : json文件名 例: showpop('cccc1')
//弹出层(主要用来选择商品的参数)
$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>产品参数</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>
弹出层的数据为data
具体data中的参数请参考json文件的数据
数据填充:格式为{{XXXX}}
<!--html code-->
{{data.title}}
<!--结果-->
cccc1
<!--data中没有数据则无数据输出-->
下拉选择参数:
例:
<!--html code-->
<select ng-model="set.size" ng-options="x for (y, x) in data.size.data"></select>
-
ng-model:指令绑定了 HTML 表单元素到,如set.size,set.后面带参数如"size" -
ng-options: 填充参数选项.例:x for (y, x) in data.size.data这里size可以换成别的参数 -
addcart()为添加到购物车的函数
<a ng-click="addcart()" class="pointer">addcart</a>
购物车列表数据填充
<h1>购物车列表</h1>
<div class="cart box">
<ul>
<!--循环-->
<li ng-repeat="x in cartlist">
{{x.title}}
<!--购物车产品数量-->
<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循环方法cartlist为 购物车列表 -
user用户提交数据的集合,用法:user.name用户名 -
ng-mouseleave鼠标离开事件
