AngularJS - 具有雙向綁定自定義控件的動態行和列

我是Angular的新手，我堅持我的下一步開發，即將自定義控件綁定到動態行列表。AngularJS - 具有雙向綁定自定義控件的動態行和列

我這裏有一個簡單的擺弄它展示瞭如何將數據綁定自定義控件：

這裏另一個撥弄這是我的出發點，展示瞭如何綁定數據的行，列的表驅動列名：

<!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/

來源

2014-02-06 user2728841

我現在已經從谷歌集團的解決方案在這裏https://groups.google.com/forum/?hl=en#!topic/angular/6z0thNG1dnI – user2728841

以下是完整有效的解決方案，我希望有人認爲它有用。

<!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-07 17:16:26 user2728841

這是真棒，但你的方式做同樣的在Angular 2中？。後續問題在這裏http://stackoverflow.com/questions/38810318/dynamically-loading-columns-and-data-in-to-table-in-angular-2 – user728630

對不起，最終沒有使用角度，和確實沒有其他人的圖書館（JQ除外） - 好多了！ – user2728841

AngularJS - 具有雙向綁定自定義控件的動態行和列

回答

相關問題