• 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>
  • 相关阅读:
    (转)Shell中read的用法详解
    How to install OpenResty
    MYSQL随机抽取查询 MySQL Order By Rand()效率问题
    NGINX、PHP-FPM开机自动启动
    Nginx和PHP-FPM的启动/重启脚本 [转发]
    绕过 <?PHP exit('Access Denied'); ?> 限制
    OpenResty(Nginx)+Lua+GraphicsMagick实现缩略图功能
    ImageMagick资料
    MySQL5.5 RPM安装的默认安装路径
    PHP编译支持mysqli
  • 原文地址:https://www.cnblogs.com/westfruit/p/5213279.html
Copyright © 2020-2023  润新知