簡體   English   中英

ng-repeat不填充表

[英]ng-repeat not populating table

我已經用JSON文件中的數據填充了一個表,然后當用戶單擊表中的項目時,一個容器及其字段顯示在下面,應該用該特定數據填充該容器,盡管不是。

通過list-patents.htm調用select函數,該列表包含帶有專利列表的表。 我使用了$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);


}]);

list-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>

專利項目

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

您需要更正以下幾點:

  1. 您的$rootScope.select()方法不接受從list-patents.htm傳遞的數據( select(x) ),因此將item作為參數。例如: $rootScope.select = function(item) { \\\\ code

  2. 正當您對$rootScope.patentItem進行ng-repeat ,那么我想您需要將其設置為array ,並將push the passed data to it (也不需要返回語句。)

所以運行塊應該像:

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

看到這個例子小提琴

對我來說,似乎您正在嘗試訪問在select函數中選擇的patentItem。 如果以這種方式將其傳遞給$ rootScope,則還需要以這種方式訪問​​它。

因此,請按如下所示更改該行...

$scope.selectedPatent = $rootScope.patentItem

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM