产品列表

例子代码:

    <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鼠标离开事件