需要使用ng-repeat

时间:2017-07-24 14:14:23

标签: javascript html angularjs json angularjs-ng-repeat

这是我的JSON数据。

{
    "_id": {
        "$oid": "59725b07734d1d6202a87993"
    },
    "anchoring": [
        {
            "id": 225,
            "itemno": "AE20100",
            "image": "images/prodimg/AE20100.jpg",
            "name": "ANCHOR, SPADE, 26LBS",
            "price": 1312,
            "dfec": 3542.4,
            "dpec": 4981.613357,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 227,
            "itemno": "AL01389",
            "image": "images/prodimg/AL01389.jpg",
            "name": "FIRE HOSE 2\"",
            "price": 3.35,
            "dfec": 9.045,
            "dpec": 12.71982069,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 228,
            "itemno": "AL01390",
            "image": "images/prodimg/AL01390.jpg",
            "name": "FIRE HOSE 3\"",
            "price": 4.95,
            "dfec": 13.365,
            "dpec": 18.79495893,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 229,
            "itemno": "AL01391",
            "image": "images/prodimg/AL01391.jpg",
            "name": "FIRE HOSE 1.5",
            "price": 2.55,
            "dfec": 6.885,
            "dpec": 9.68225157,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 279,
            "itemno": "AT56551",
            "image": "images/prodimg/AT56551.jpg",
            "name": "CLEAT, NYLON 4 INCH",
            "price": 2.2,
            "dfec": 5.94,
            "dpec": 8.35331508,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 280,
            "itemno": "AT56554",
            "image": "images/prodimg/AT56554.jpg",
            "name": "CLEAT, NYLON 8 INCH",
            "price": 5.25,
            "dfec": 14.175,
            "dpec": 19.93404735,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 326,
            "itemno": "BK40030",
            "image": "images/prodimg/BK40030.jpg",
            "name": "SEABRAKE, 35 TO 55FT",
            "price": 329.95,
            "dfec": 890.865,
            "dpec": 1252.807414,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 680,
            "itemno": "DI02420",
            "image": "images/prodimg/DI02420.jpg",
            "name": "ANCHORSNUBBER, 20\"",
            "price": 70.25,
            "dfec": 189.675,
            "dpec": 266.7365384,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 681,
            "itemno": "DI02430",
            "image": "images/prodimg/DI02430.jpg",
            "name": "MINI-SHOCKLE 12\" BLACK",
            "price": 15.75,
            "dfec": 42.525,
            "dpec": 59.80214205,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 764,
            "itemno": "HD10050",
            "image": "images/prodimg/HD10050.jpg",
            "name": "ANCHOR, HYDROBUBBLE 50SA",
            "price": 930,
            "dfec": 2511,
            "dpec": 3531.174102,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 768,
            "itemno": "HG00108",
            "image": "images/prodimg/HG00108.jpg",
            "name": "EYE & EYE SWIVEL 316 8MM",
            "price": 8.95,
            "dfec": 24.165,
            "dpec": 33.98280453,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 769,
            "itemno": "HG00126",
            "image": "images/prodimg/HG00126.jpg",
            "name": "ANCHOR CHAIN CONNECTION",
            "price": 65.25,
            "dfec": 176.175,
            "dpec": 247.7517314,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 770,
            "itemno": "HG00208",
            "image": "images/prodimg/HG00208.jpg",
            "name": "JAW AND JAW SWIVEL 8MM",
            "price": 11.5,
            "dfec": 31.05,
            "dpec": 43.6650561,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 771,
            "itemno": "HG00213",
            "image": "images/prodimg/HG00213.jpg",
            "name": "JAW AND JAW SWIVEL 13MM",
            "price": 36.85,
            "dfec": 99.495,
            "dpec": 139.9180276,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 772,
            "itemno": "HG00306",
            "image": "images/prodimg/HG00306.jpg",
            "name": "EYE AND JAW SWIVEL SS 6MM",
            "price": 7.15,
            "dfec": 19.305,
            "dpec": 27.14827401,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 802,
            "itemno": "HG02604",
            "image": "images/prodimg/HG02604.jpg",
            "name": "WIRE THIMBLE S/S 4mm 5/32\"",
            "price": 0.7,
            "dfec": 1.89,
            "dpec": 2.65787298,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 803,
            "itemno": "HG02605",
            "image": "images/prodimg/HG02605.jpg",
            "name": "WIRE THIMBLE SS 5mm 3/16\"",
            "price": 0.86,
            "dfec": 2.322,
            "dpec": 3.265386804,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 804,
            "itemno": "HG02606",
            "image": "images/prodimg/HG02606.jpg",
            "name": "WIRE THIMBLE SS 6mm 1/4\"",
            "price": 1.1,
            "dfec": 2.97,
            "dpec": 4.17665754,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 805,
            "itemno": "HG02610",
            "image": "images/prodimg/HG02610.jpg",
            "name": "THIMBLE, S/S 3/8",
            "price": 3.2,
            "dfec": 8.64,
            "dpec": 12.15027648,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 806,
            "itemno": "HG02612",
            "image": "images/prodimg/HG02612.jpg",
            "name": "WIRE THIMBLE SS 12mm 1/2\"",
            "price": 4.4,
            "dfec": 11.88,
            "dpec": 16.70663016,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 807,
            "itemno": "HG02614",
            "image": "images/prodimg/HG02614.jpg",
            "name": "THIMBLE, S/S 9/16",
            "price": 4.65,
            "dfec": 12.555,
            "dpec": 17.65587051,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 808,
            "itemno": "HG02658",
            "image": "images/prodimg/HG02658.jpg",
            "name": "THIMBLE S/S 3/4",
            "price": 8.95,
            "dfec": 24.165,
            "dpec": 33.98280453,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 809,
            "itemno": "HG02905",
            "image": "images/prodimg/HG02905.jpg",
            "name": "QUICK LINK SS 5MM",
            "price": 3.95,
            "dfec": 10.665,
            "dpec": 14.99799753,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 810,
            "itemno": "HG02908",
            "image": "images/prodimg/HG02908.jpg",
            "name": "QUICK LINK 8mm",
            "price": 9.95,
            "dfec": 26.865,
            "dpec": 37.77976593,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 830,
            "itemno": "HG20012",
            "image": "images/prodimg/HG20012.jpg",
            "name": "CHAIN CONNECTOR, 12MM",
            "price": 6.3,
            "dfec": 17.01,
            "dpec": 23.92085682,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 831,
            "itemno": "HG20202",
            "image": "images/prodimg/HG20202.jpg",
            "name": "FOLD ANCHOR (GALV. 2.5KG",
            "price": 29.75,
            "dfec": 80.325,
            "dpec": 112.9596017,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 832,
            "itemno": "HG20203",
            "image": "images/prodimg/HG20203.jpg",
            "name": "ANCHOR, FOLDING 7LB",
            "price": 36.75,
            "dfec": 99.225,
            "dpec": 139.5383315,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 833,
            "itemno": "HG20305",
            "image": "images/prodimg/HG20305.jpg",
            "name": "SHACKLE, BOW 3/16\" TESTED",
            "price": 2.25,
            "dfec": 6.075,
            "dpec": 8.54316315,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 834,
            "itemno": "HG20306",
            "image": "images/prodimg/HG20306.jpg",
            "name": "SHACKLE, BOW 1/4\" TESTED",
            "price": 2.5,
            "dfec": 6.75,
            "dpec": 9.4924035,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 835,
            "itemno": "HG20308",
            "image": "images/prodimg/HG20308.jpg",
            "name": "SHACKLE BOW 5/16 TESTED",
            "price": 2.95,
            "dfec": 7.965,
            "dpec": 11.20103613,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 836,
            "itemno": "HG20310",
            "image": "images/prodimg/HG20310.jpg",
            "name": "SHACKLE, BOW 3/8 TESTED",
            "price": 3.5,
            "dfec": 9.45,
            "dpec": 13.2893649,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 837,
            "itemno": "HG20311",
            "image": "images/prodimg/HG20311.jpg",
            "name": "SHACKLE, BOW 7/16 TESTED",
            "price": 5.55,
            "dfec": 14.985,
            "dpec": 21.07313577,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 838,
            "itemno": "HG20312",
            "image": "images/prodimg/HG20312.jpg",
            "name": "SHACKLE BOW 1/2 TESTED",
            "price": 5.25,
            "dfec": 14.175,
            "dpec": 19.93404735,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 839,
            "itemno": "HG20408",
            "image": "images/prodimg/HG20408.jpg",
            "name": "SHACKLE, BOW 5/16\" GALV",
            "price": 0.95,
            "dfec": 2.565,
            "dpec": 3.60711333,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 840,
            "itemno": "HG20410",
            "image": "images/prodimg/HG20410.jpg",
            "name": "SHACKLE BOW 3/8 GALV",
            "price": 1.5,
            "dfec": 4.05,
            "dpec": 5.6954421,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 841,
            "itemno": "HG20411",
            "image": "images/prodimg/HG20411.jpg",
            "name": "SHACKLE, BOW 7/16 GALV",
            "price": 1.75,
            "dfec": 4.725,
            "dpec": 6.64468245,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 844,
            "itemno": "HG71415",
            "image": "images/prodimg/HG71415.jpg",
            "name": "FOLDING ANCHOR SS",
            "price": 97.75,
            "dfec": 263.925,
            "dpec": 371.1529769,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 845,
            "itemno": "HG71425",
            "image": "images/prodimg/HG71425.jpg",
            "name": "FOLDING ANCHOR (AIS1316,",
            "price": 162.85,
            "dfec": 439.695,
            "dpec": 618.335164,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 847,
            "itemno": "HG80002",
            "image": "images/prodimg/HG80002.jpg",
            "name": "ANCHOR, 316SS CLAW 2KG",
            "price": 86.2,
            "dfec": 232.74,
            "dpec": 327.2980727,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 863,
            "itemno": "ID10015",
            "image": "images/prodimg/ID10015.jpg",
            "name": "CLEAT, ALMAG S 15",
            "price": 47.15,
            "dfec": 127.305,
            "dpec": 179.02673,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 864,
            "itemno": "IE10701",
            "image": "images/prodimg/IE10701.jpg",
            "name": "FENDER COVER F7,NAVY PAIR",
            "price": 75.5,
            "dfec": 203.85,
            "dpec": 286.6705857,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 877,
            "itemno": "IO00816",
            "image": "images/prodimg/IO00816.jpg",
            "name": "NO-WRENCH SAND SCREW 5.5FTx8\"",
            "price": 73.8,
            "dfec": 199.26,
            "dpec": 280.2157513,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 878,
            "itemno": "IO10146",
            "image": "images/prodimg/IO10146.jpg",
            "name": "NO-WRENCH SAND SCREW 5.5FTx10\"",
            "price": 77.95,
            "dfec": 210.465,
            "dpec": 295.9731411,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 881,
            "itemno": "JB04000",
            "image": "images/prodimg/JB04000.jpg",
            "name": "MOORING BALL INSERT",
            "price": 122.25,
            "dfec": 330.075,
            "dpec": 464.1785312,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 882,
            "itemno": "JB04202",
            "image": "images/prodimg/JB04202.jpg",
            "name": "MOORING (PENDANT) BUOY, 18\"",
            "price": 214.5,
            "dfec": 579.15,
            "dpec": 814.4482203,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 883,
            "itemno": "JB44000",
            "image": "images/prodimg/JB44000.jpg",
            "name": "MOORING BUOY, 12 SWIVEL",
            "price": 155.95,
            "dfec": 421.065,
            "dpec": 592.1361303,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 884,
            "itemno": "JB44032",
            "image": "images/prodimg/JB44032.jpg",
            "name": "MOORING BUOY, 24 INCH",
            "price": 274.95,
            "dfec": 742.365,
            "dpec": 1043.974537,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 930,
            "itemno": "LM108102",
            "image": "images/prodimg/LM108102.jpg",
            "name": "WINDLASS,PRO-SERIES 700W 5/16\"",
            "price": 1385,
            "dfec": 3739.5,
            "dpec": 5258.791539,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 931,
            "itemno": "LM198311",
            "image": "images/prodimg/LM198311.jpg",
            "name": "WINDLASS, PRO-SERIES 1000 8MM",
            "price": 1603.75,
            "dfec": 4330.125,
            "dpec": 6089.376845,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 938,
            "itemno": "LR20242",
            "image": "images/prodimg/LR20242.jpg",
            "name": "FLAT FENDER 3 X 12 X 24\" BLUE",
            "price": 59.95,
            "dfec": 161.865,
            "dpec": 227.6278359,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 943,
            "itemno": "LZ10071",
            "image": "images/prodimg/LZ10071.jpg",
            "name": "SEA ANCHOR, TO 15'/4.5M BOAT",
            "price": 17.95,
            "dfec": 48.465,
            "dpec": 68.15545713,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 944,
            "itemno": "LZ10072",
            "image": "images/prodimg/LZ10072.jpg",
            "name": "SEA ANCHOR, TO 20'/6M BOAT",
            "price": 20.75,
            "dfec": 56.025,
            "dpec": 78.78694905,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 945,
            "itemno": "LZ10074",
            "image": "images/prodimg/LZ10074.jpg",
            "name": "SEA ANCHOR, TO 30'/9M BOAT",
            "price": 33.95,
            "dfec": 91.665,
            "dpec": 128.9068395,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 946,
            "itemno": "LZ10075",
            "image": "images/prodimg/LZ10075.jpg",
            "name": "SEA ANCHOR, TO 40'/12M BOAT",
            "price": 41.95,
            "dfec": 113.265,
            "dpec": 159.2825307,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 947,
            "itemno": "LZ10240",
            "image": "images/prodimg/LZ10240.jpg",
            "name": "SEA ANCHOR, TO 49FT/15M BOAT",
            "price": 92.5,
            "dfec": 249.75,
            "dpec": 351.2189295,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 976,
            "itemno": "MA31380",
            "image": "images/prodimg/MA31380.jpg",
            "name": "CHAIN ISO G43 3/8 PITCH",
            "price": 6.65,
            "dfec": 17.955,
            "dpec": 25.24979331,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 977,
            "itemno": "MA31516",
            "image": "images/prodimg/MA31516.jpg",
            "name": "CHAIN ISO G43 5/16 PITCH",
            "price": 5.35,
            "dfec": 14.445,
            "dpec": 20.31374349,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 978,
            "itemno": "MA31716",
            "image": "images/prodimg/MA31716.jpg",
            "name": "CHAIN ISO G43 7/16 PITCH",
            "price": 10.95,
            "dfec": 29.565,
            "dpec": 41.57672733,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 979,
            "itemno": "MA32380",
            "image": "images/prodimg/MA32380.jpg",
            "name": "CHAIN BBB DIA 3/8 PITCH",
            "price": 8.15,
            "dfec": 22.005,
            "dpec": 30.94523541,
            "category": "ANCHORING&",
            "selected": 0
        },
        {
            "id": 980,
            "itemno": "MA32516",
            "image": "images/prodimg/MA32516.jpg",
            "name": "CHAIN BBB DIA 5/16 PITCH",
            "price": 6.15,
            "dfec": 16.605,
            "dpec": 23.35131261,
            "category": "ANCHORING&",
            "selected": 0
        }
    ]
}

这是我在Angular中的HTML页面。

<div class="row">
              <h2 class="page-header">Anchoring Section</h2>
              <p><label for="search">Search For</label> <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="Enter Search Term" ng-model="filtText" id="search"></p>

                <div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="item in anchoring | filter:filtText">
                    <div class="thumbnail">
                        <img src="{{item.image}}" alt="">
                        <div class="caption">
                            <h4 class="pull-right">US{{item.price | currency}}</h4>
                            <h4>{{item.name}}</h4>
                            <small>Catalog Code: {{item.itemno}}</small>
                        </div>
                        <div class="ratings">
                            <ngcart-addtocart id="{{ item.id }}" name="{{ item.name }}" price="{{ item.price }}" quantity="1" quantity-max="30" data="item">Quote</ngcart-addtocart>
                            <p>
                                <span>Duty Free EC$: {{item.price * 2.7 | currency}}</span><br>
                                <span>Duty Paid EC$: {{item.price * 3 | currency}}</span>
                            </p>
                        </div>
                    </div>
                </div>


            </div>

这是我的角度控制器

.controller('anchoringController', ['$scope', '$stateParams', 'anchoringFactory', 'baseURL', function($scope, $stateParams, anchoringFactory, baseURL) {

            $scope.showAnchoring = false;
            $scope.message = "Loading ...";

            anchoringFactory.query(
                function (response) {
                    $scope.anchoring = response;
                    $scope.showAnchoring = true;
                },
                function (response) {
                    $scope.message = "Error: " + response.status + " " + response.statusText;
                }
              );
                console.log(anchoringFactory.query());
                
}])

如何使用ng-repeat获取“锚定”数组的项目以显示在页面上?我的控制台和{{anchoring}}显示$ scope.anchoring肯定会抓取整个JSON对象。但是,ng-repeat给我一个空白的结果。我觉得我没有正确引用一些东西。如何让“锚定”中的对象显示在我的页面上?

1 个答案:

答案 0 :(得分:0)

啊,因为你没有给工厂,我认为$scope.anchoring包含所有对象,而不仅仅是anchoring属性,因为你应该在锚定时使用`ng-repeat =“项.anchoring”。

所以我认为观点应该是这样的:

<div class="row">
              <h2 class="page-header">Anchoring Section</h2>
              <p><label for="search">Search For</label> <span class="glyphicon glyphicon-search"></span> <input type="text" placeholder="Enter Search Term" ng-model="filtText" id="search"></p>

                <div class="col-sm-4 col-lg-4 col-md-4" ng-repeat="item in anchoring.anchoring | filter:filtText">
                    <div class="thumbnail">
                        <img src="{{item.image}}" alt="">
                        <div class="caption">
                            <h4 class="pull-right">US{{item.price | currency}}</h4>
                            <h4>{{item.name}}</h4>
                            <small>Catalog Code: {{item.itemno}}</small>
                        </div>
                        <div class="ratings">
                            <ngcart-addtocart id="{{ item.id }}" name="{{ item.name }}" price="{{ item.price }}" quantity="1" quantity-max="30" data="item">Quote</ngcart-addtocart>
                            <p>
                                <span>Duty Free EC$: {{item.price * 2.7 | currency}}</span><br>
                                <span>Duty Paid EC$: {{item.price * 3 | currency}}</span>
                            </p>
                        </div>
                    </div>
                </div>


            </div>

我认为ng-repeat给你空白,因为你在对象中做ng-repeat,所以你必须指定包含数组的属性。

希望它可以提供帮助:D