ng-repeat没有填充表格

时间:2017-06-07 09:25:57

标签: javascript angularjs angularjs-ng-repeat

我用JSON文件中的数据填充了一个表,然后当用户点击表中的某个项目时,一个容器及其字段显示在下面,并且应该填充该特定数据,尽管它不是吨。

通过select调用函数list-patents.htm,其中包含具有专利列表的表格。我使用了$rootScope对象,因此可以从多个控制器访问该函数,即patentDetailsCtrl

为什么patent-item.htm中的表格没有填充ng-repeat指令?

var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router', "chart.js"]);

$stateProvider   
    .state("patents.list.item", {
        url: "/patent-item",
        templateUrl: "templates/patents/list/patent-item.htm",
        params: {
            id: null,
            appNo: null,
            clientRef: null,
            costToRenew: null,
            renewalDueDate: null,
            basketStatus: null,
            costBandEnd: null,
            nextStage: null
        },
        controller: "patentDetailsCtrl"
    })

app.run(function($rootScope) {
    $rootScope.select = function() {       
        return $rootScope.patentItem = item;
    }
});

app.controller('patentDetailsCtrl', ['$scope', '$http', function($scope, $http) {

    $scope.selectedPatent = $scope.patentItem;

    console.log($scope.selectedPatent);


}]);

列表patents.htm

<tbody>
    <tr ng-repeat="x in patents">
        <td ng-click="select(x)"><a ui-sref="patents.list.item({id: x.id, appNo: x.applicationNumber, clientRef: x.clientRef, costToRenew: x.costToRenew, renewalDueDate: x.renewalDueDate, basketStatus: x.basketStatus, costBandEnd: x.costBandEnd, nextStage: x.nextStage})">{{x.applicationNumber}}</a></td>
        <td ng-bind="x.clientRef"></td>
        <td ng-bind="x.costToRenew">$</td>
        <td ng-bind="x.renewalDueDate"></td>
        <td><button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button></td>
    </tr>
</tbody>

专利item.htm

<table>
    <tbody>
        <thead>
            <tr>
                <td>applicationNumber</td>
                <td>clientRef</td>
                <td>costToRenew</td>
                <td>renewalDueDate</td>
                <td>basketStatus</td>
                <td>costBandEnd</td>
                <td>nextStage</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in selectedPatent">
                <td>{{x.applicationNumber}}</td>
                <td>{{x.clientRef}}</td>
                <td>{{x.costToRenew}}</td>
                <td>{{x.renewalDueDate}}</td>
                <td>{{x.basketStatus}}</td>
                <td>{{x.costBandEnd}}</td>
                <td>{{x.nextStage}}</td>
            </tr>
        </tbody>    
    </table> 
</tbody>

2 个答案:

答案 0 :(得分:1)

您需要纠正以下几点:

  1. 您的$rootScope.select()方法不接受从select(x)传递的数据(list-patents.htm),因此将item作为参数。 喜欢:$rootScope.select = function(item) { \\ code

  2. 您在ng-repeat$rootScope.patentItem正常,然后我想您需要arraypush the passed data to it。 (也不需要退货声明。)

  3. 所以运行块应该像:

    app.run(function($rootScope) {
     rootScope.patentItem = [];
     $rootScope.select = function(item) {       
        $rootScope.patentItem.push(item);
     }
    });
    

    请参阅此Example Fiddle

答案 1 :(得分:0)

对我而言,您似乎正在尝试访问在您的选择功能中选择的patentItem。如果您以这种方式将它传递给$ rootScope,您还需要以这种方式访问​​它。

所以改变行如下......

        Queue<TreeNode> currentLevel = new Queue<TreeNode>();
        Queue<TreeNode> nextLevel = new Queue<TreeNode>();
        // 1. push root to the queue
        currentLevel.Enqueue(treeView1.Nodes[0]);

        // pop the first item from the front of the queue
        while (currentLevel.Count > 0)
        {
            while (currentLevel.Count > 0)
            {
                TreeNode n = currentLevel.Dequeue();
                Console.WriteLine(n.Text);

                // Add child items to next level
                foreach (TreeNode child in n.Nodes)
                {
                    nextLevel.Enqueue(child);
                }

            }
            // Switch to next level
            currentLevel = nextLevel;
            // 2. mark this line 
            //nextLevel = new Queue<TreeNode>();
        }