javascript - 将表行传递给 Angular 中的函数

Question

我是 Angular 的 super 新手，有人告诉我它很棒，但也有人告诉我它的学习曲线非常高。在过去的 3 个小时里，我一直在反复用头撞墙，试图找出答案。

我也找不到任何关于它的文档。我要么不知道要搜索什么，要么不可能再搜索什么。

function modalCtrl($scope, $modal) {

    $scope.openManageMainCd = function() {
        var modalInstance = $modal.open({
            templateUrl: 'views/modalManageMainCd.html',
            controller: ModalInstanceCtrl
        });
    };
    $scope.openLadders = function(e) {

        alert(e);
        var modalInstance = $modal.open({
            templateUrl: 'views/ladderModal.html',
            controller: LadderInstanceCtrl
        });
    };
};    

function LadderInstanceCtrl($scope) {
    $scope.ladder = GetLadderData(_facilityData.holdings);
};

function GetLadderData(holdings){
    var holdingData = [];

    angular.forEach(holdings, function(value, key) {
        if (value.type == 'Ladder') {
             angular.forEach(value.cds, function(value, key) {
                var obj = { type: value.type, name: value.name, amount: value.amount, rate: value.rate, maturityDate: value.maturityDate }
                holdingData.push(obj);
             });
        }
    });
    return holdingData;
};            

这个大困惑是我用我的时间创造的。单击我的表中的一行时，它会调用 openLadders 函数。现在，我已经尝试在阳光下发送所有内容，但到目前为止都没有帮助。我想基本上把它发送出去。我需要行中的一个 ID，我只想要那个 ID。我试过了....

ng-click="openLadders(row) == 函数表示行未定义

ng-click="openLadders($event) == 我不知道我在看什么

ng-click="openLadders($index) == 对我没有帮助

还有更多。 Angular 的网站并没有真正详细说明我需要了解的内容，因此我无法在那里找到帮助。我在网站上浏览了两个关于 Angular 的教程，这让我相信这是可能的。

任何人都可以在这里提供任何帮助吗？我迷路了。

表格是这样构建的:

<tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" class="" ng-controller="modalCtrl" ng-click="openLadders()">
    <td><i class="icon-plus" ></i> {{holding.type}}</td>
    <td contenteditable="true">{{holding.name}}</td>
    <td>{{holding.maturityDate}}</td>
    <td>{{holding.amount | currency:"$"}}</td>
    <td>{{holding.rate | percentage:2}}</td>
</tr>

似乎有一个明显的后续问题，一旦我从函数 openLadders 获得信息，它将发送到实际的 LadderInstanceCtrl()。因此，我们将不胜感激任何一个主题的帮助。

非常感谢。

Answer 1

你说得对，Angular 有一个学习曲线，但一旦理解了作用域的工作原理就不会那么陡峭。

你已经非常接近你想要的了，只需要将你需要的确切字段作为参数传递给函数，这可能感觉与纯 javascript 有点不同。

你描述的是用(注意 ng-click 指令)解决的:

<tr ng-repeat="holding in holdings" ng-if="holding.type == 'Ladder'" class="" ng-controller="modalCtrl" ng-click="openLadders(holding.id)">
    <td><i class="icon-plus" ></i> {{holding.type}}</td>
    <td contenteditable="true">{{holding.name}}</td>
    <td>{{holding.maturityDate}}</td>
    <td>{{holding.amount | currency:"$"}}</td>
    <td>{{holding.rate | percentage:2}}</td>
</tr>

在类似情况下，使用 ng-click="openLadders(holding)" 传递整个 holding 对象可能同样方便。尝试这样做并查看行为也可能具有指导意义。

希望这对您有所帮助。