argularjs 第三个项目sku绑定 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}
    <button name="button"  ng-click="skuIni()">点我</button>
<table>    
    <tr>
        <td>规格</td><td>价格</td><td>库存</td><td>商品编码</td>
    </tr>
    <tr  ng-repeat="sku in skus">
        <td>{{sku.v_name}}</td><td><input type="text" name="price_{{$index+'_'+sku.v_id}}" ng-model="sku.price"></td>
        <td><input type="text" name="stock_{{$index+'_'+sku.v_id}}"  ng-model="sku.stock"></td>
        <td><input type="text" name="sn_{{$index+'_'+sku.v_id}}"  ng-model="sku.sn"></td>
        
    </tr>
</table>
<pre>{{skus|json}}</pre>    
</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
    $scope.attrlist=[{attrid:1,name:'颜色',attr_values:[{v_id:1,v_name:'白色'},{v_id:2,v_name:'黑色'}]},{attrid:2,name:'内存容量',attr_values:[{v_id:3,v_name:'16G'},{v_id:4,v_name:'32G'}]},{attrid:3,name:'网络类型',attr_values:[{v_id:5,v_name:'移动'},{v_id:6,v_name:'联通'}]}];
    $scope.skus=[];
    $scope.skuscopy=[];
    $scope.skustemp=[];
    $scope.skuIni=function(){
        $scope.skus=[];
        $scope.skuscopy=[];
        $scope.skustemp=[];
        angular.forEach($scope.attrlist, function(data,index,array){
            $scope.skustemp=[];
            angular.forEach(data.attr_values, function(data2,index2,array2){
                $scope.skustemp.push(data2);
            });
            
            if($scope.skus.length>0){
                $scope.skuscopy=$scope.skus;
                $scope.skus=[];
                angular.forEach($scope.skuscopy, function(data3,index3,array3){
                    console.log(data3);
                    angular.forEach($scope.skustemp, function(data4,index4,array4){
                        var sku={v_id:data4.v_id+'#'+data3.v_id,v_name:data4.v_name+'#'+data3.v_name,price:0,stock:0,sn:''}
                        $scope.skus.push(sku);
                    });                
                });
            }
            else
            {
                $scope.skus=$scope.skustemp;
            }
            
        });
    }
});
</script>

</body>
</html>

 

posted @ 2016-02-24 15:52  westfruit  阅读(391)  评论(0)    收藏  举报