0

我是 Angular 的新手，并且坚持下一步的开发，即将自定义控件绑定到动态行列表。

我在这里有一个简单的小提琴，它显示了如何数据绑定自定义控件：

http://jsfiddle.net/paull3876/WPWAc/2/

这里的另一个小提琴是我的起点，展示了如何将行列表与数据驱动的列名绑定：

http://jsfiddle.net/paull3876/3mz5L/1/

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Angular</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>

<script>

var app = angular.module("myApp", []);

function datacontroller($scope, $http)
{
    $scope.mydata = [{f1:"r1f1", f2:"r1f2"}, {f1:"r2f1",f2:"r2f2"}, {f1:"r3f1",f2:"r3f2", f3:"Hello"}];
    $scope.mycolumns = [{name:"Column 1", fieldname:"f1"}, {name:"Column 2", fieldname:"f2"}, {name:"Column 3", fieldname:"f3"}];

    $scope.showdata = function()
    {
        alert(JSON.stringify($scope.mydata));
    }

    $scope.getcolumnname = function(cell)
    {
        return cell.fieldname;
    }
}

</script>

</head>
<body>
    <div data-ng-controller="datacontroller">
        <table>
        <tr>
        <td data-ng-repeat="cell in mycolumns">{{cell.name}}</td>
        </tr>
        <tr data-ng-repeat="record in mydata">
        <td data-ng-repeat="cell in mycolumns">
        <input type="text" data-ng-init="mycol=getcolumnname(cell);" data-ng-model="record[mycol]" />
        </td>
        </tr>
        </table>

        <br />
        <input type="button" value="Save Data" ng-click="showdata()" />
        <br />
        <br />

    </div>

</body>
</html>

现在我想使用上面的第二个小提琴，并将 INPUT 元素替换为具有双向数据绑定的用户控件。我已经花了一天的时间，但无法让它工作，所以我想我在这里的概念上也需要一些帮助

非常感谢在解决方案之上的解释。

http://jsfiddle.net/paull3876/rc7uC/1/

4

1 回答 1

4

这是完整的工作解决方案，我希望有人觉得它有用。

<!DOCTYPE html>
<html >
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="-1">
    <title>Angular</title>
    <!--scr ipt src="htt ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"></script>
</head>
<body>
    <div data-ng-app="myApp" data-ng-controller="datacontroller">
        <table>
            <tr>
                <td data-ng-repeat="cell in mycolumns">{{cell.name}}</td>
            </tr>
            <tr data-ng-repeat="record in mydata">
                <td data-ng-repeat="cell in mycolumns">
                    <mycontrol data-my-model="record[cell.fieldname]"></mycontrol>
                </td>
            </tr>
        </table>
        <br />
        <input type="button" value="Save Data" ng-click="showdata()" />
        <input type="button" value="Change Divs" onclick="changediv()" />
        <input type="button" value="Change Scope" onclick="changescope()" />
        <br />
        <br />
    </div>
</body>
</html>
<script>
    var globalscope;
    var app = angular.module("myApp", [])
        .directive("mycontrol", function ($compile) {
        return {
            restrict: "E",
            scope: {
                value: "=myModel"
            },
            template: "<div data-ng-bind='value'/>"
        };
    });

    function datacontroller($scope, $http) {
        globalscope = $scope;
        var mydata = [];
        // generate some data
        for (var i = 0; i < 20; i++)
        {
            var row = {
                f1:"f1x" + i, 
                f2:"f2x" + i, 
                f3:"f3x"+i, 
                f4:"f4x"+i,
                f5:"f5x"+i,
                f6:"f6x"+i,
                f7:"f7x"+i,
                f8:"f8x"+i,
                f9:"f9x"+i,
                f10:"f10x"+i,
                f11:"f11x"+i,
                f12:"f12x"+i,
                f13:"f13x"+i
                };
            mydata.push(row);
        }

        // push it to angulars scope
        $scope.mydata = mydata;

        // generate some metadata for the columns
        $scope.mycolumns = [{
            name: "Column 1",
            fieldname: "f1",
            type: "input"
        }, {
            name: "Column 2",
            fieldname: "f2",
            type: "textarea"
        }, {
            name: "Column 3",
            fieldname: "f3",
            type: "div"
        }, {
            name: "Column 4",
            fieldname: "f4",
            type: "div"
        }, {
            name: "Column 5",
            fieldname: "f5",
            type: "div"
        }, {
            name: "Column 6",
            fieldname: "f6",
            type: "div"
        }, {
            name: "Column 7",
            fieldname: "f7",
            type: "div"
        }, {
            name: "Column 8",
            fieldname: "f8",
            type: "div"
        }, {
            name: "Column 9",
            fieldname: "f9",
            type: "div"
        }, {
            name: "Column 10",
            fieldname: "f10",
            type: "div"
        }, {
            name: "Column 11",
            fieldname: "f11",
            type: "div"
        }, {
            name: "Column 12",
            fieldname: "f12",
            type: "div"
        }, {
            name: "Column 13",
            fieldname: "f13",
            type: "div"
        }];

        $scope.showdata = function () {
            alert(JSON.stringify($scope.mydata));
        };

        $scope.getcolumnname = function (cell) {
            return cell.fieldname;
        };
    }

    function changediv()
    {
        // this will change the data in the divs but it won't reflect back to the scope

        var divs = document.getElementsByClassName("fred");
        for (var i = 0; i < divs.length; i++)
        {
            var div = divs[i];
            div.innerText = "XXXX";
        }

    }

    function changescope()
    {
        // shows how to change data programmatically and have it reflected in the controls and in the scope data

        var scope = globalscope;
        for (r in scope.mydata)
        {
            scope.mydata[r].f3 = "UUUU";
        }
        scope.$apply();
    }
</script>
于 2014-02-07T17:16:26.130 回答