Question

我已经通过下面给出的一个plunker链接，它传递了来自JSON的2个静态数据，我想使用ng-repeat并显示所有数据，结果应该相应地改变。

Plunker Link is : (http://plnkr.co/edit/5WF6FxvwocVBqhuvt4VL?p=preview)

代码如下：

<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>

<body data-ng-controller="TestController">
    <table id="hotels">
        <tr>
            <th>Hotel Name</th>
            <th>Star Rating</th>
            <th>Hotel type</th>
            <th>Hotel Price</th>
        </tr>
        <tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
            <td>{{hotel.name}}</td>
            <td>{{hotel.star}}</td>
            <td>{{hotel.type}}</td>
            <td>{{hotel.price}}</td>
        </tr>
    </table>
    <br/>
    <h4>Filters</h4>
    <input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury &nbsp;&nbsp;&nbsp;
    <input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
   </body>

   </html>

脚本在下面给出

// Code goes here

var iApp = angular.module("App", []);
        iApp.controller('TestController', function($scope)
        {                
            $scope.search=[];
            $scope.hotels = [
                {
                    name: 'the taj hotel',
                    star: 5,
                    type: 'luxury',
                    price: 5675
                },
                {
                    name: 'vivanta Palace',
                    star: 5,
                    type: 'luxury',
                    price: 8670
                },
                {
                    name: 'aviary',
                    star: 4,
                    type: 'double suite',
                    price: 3000
                },
                 {
                    name: 'dummy',
                    star: 4,
                    type: 'dummy',
                    price: 33333100
                },
                {
                    name: 'good guest',
                    star: 3,
                    type: 'double suite',
                    price: 3500
                },
                {
                    name: 'the ramada',
                    star: 3,
                    type: 'luxury',
                    price: 7500
                }
            ];                
        });

Answer 1

我认为你想要这样的东西：

PLUNKER

您的HTML：

<table id="hotels">
    <tr>
        <th>Hotel Name</th>
        <th>Star Rating</th>
        <th>Hotel type</th>
        <th>Hotel Price</th>
    </tr>
    <tr data-ng-repeat="hotel in hotels | filter:filertHotelTypes">
        <td>{{hotel.name}}</td>
        <td>{{hotel.star}}</td>
        <td>{{hotel.type}}</td>
        <td>{{hotel.price}}</td>
    </tr>
</table>
<br/>
<h4>Filters</h4>
  <label ng-repeat="hotelType in hotelTypes">  
     <input type="checkbox" value="{{hotelType}}" ng-checked="hotelTypefilter.indexOf(hotelType) > -1" ng-click="toggleSelection(hotelType)">
     {{hotelType}}
  </label>

你的控制器：

        $scope.hotelTypefilter=[];
        $scope.hotelTypes = ['luxury','double suite','dummy'];
        $scope.toggleSelection=function toggleSelection(hotelType) {
          var idx = $scope.hotelTypefilter.indexOf(hotelType);
          if (idx > -1) 
            $scope.hotelTypefilter.splice(idx, 1);
          else 
            $scope.hotelTypefilter.push(hotelType);
        };
        $scope.filertHotelTypes = function(value, index){
          return $scope.hotelTypefilter.length==0 || $scope.hotelTypefilter.indexOf(value.type)>-1;
        }

angularjs中的动态数据-ng-true-value

1 个答案:

PLUNKER