小编Par*_*tal的帖子

我是AngularJS的新手,我正在构建一个小概念概念车租用列表应用程序,它可以提取一些JSON并通过ng-repeat显示各种数据,并带有几个过滤器:

   <article data-ng-repeat="result in results | filter:search" class="result">
        <header><h3>{{result.carType.name}}, {{result.carDetails.doors}} door, &pound;{{result.price.value}} - {{ result.company.name }}</h3></header>
            <ul class="result-features">
                <li>{{result.carDetails.hireDuration}} day hire</li>
                <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
                <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
                <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
            </ul>
    </article>

    <h2>Filters</h2>

    <h4>Doors:</h4> 
    <select data-ng-model="search.carDetails">
        <option value="">All</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="9">9</option>
    </select>

    <h4>Provider:</h4>
    Atlas Choice <input type="checkbox"  data-ng-model="search.company" ng-true-value="Atlas Choice" ng-false-value="" value="Atlas Choice" /><br>
    Holiday Autos <input type="checkbox"  data-ng-model="search.company" ng-true-value="Holiday Autos" ng-false-value="" value="Holiday Autos" /><br>
    Avis <input type="checkbox"  data-ng-model="search.company" ng-true-value="Avis" ng-false-value="" value="Avis" /><br>      

现在我想在我的控制器中创建一个自定义过滤器,它可以遍历ng-repeat中的项目,只返回符合特定条件的项目 - 例如,我可能会根据哪个'provider'复选框创建一个值数组检查,然后评估每个ng-repeat项目.我只是无法弄清楚我是怎么做的,但就语法而言 - …

我第一次在这里发布了一个问题,如果我违反任何Stack Overflow礼仪,请提前道歉!:-)

我第一次参加一些AngularJS,以便为我的老板创建一个概念验证.这是一个基本的汽车租赁列表应用程序,主列中有结果列表,侧面有一个过滤器面板.我已设法从JSON对象中提取结果,并应用基本过滤器,如下所示;

<article data-ng-repeat="result in results | filter:search" class="result">
    <h3>{{result.carType.name}}, &pound;{{result.price.value}}</h3>
    <img class="car-type" alt="{{result.carType.name}}" src="{{result.carType.image}}" />
    <ul class="result-features">
            <li>{{result.carDetails.hireDuration}} day hire</li>
            <li data-ng-show="result.carDetails.airCon">Air conditioning</li>
            <li data-ng-show="result.carDetails.unlimitedMileage">Unlimited Mileage</li>
            <li data-ng-show="result.carDetails.theftProtection">Theft Protection</li>
    </ul>
</article>

过滤器

<fieldset>
Doors: 
<select data-ng-model="search.carDetails">
    <option value="">All</option>
  <option value="2">2</option>
  <option value="4">4</option>
</select>   

</fieldset>

...但是我还没有能够解决的一件事是,如何添加一组复选框来应用过滤器,比如说,'car type'会有'mini','compact'等选项, 'family'等等 - 用户可以一次过滤一个或多个选项.我知道我需要使用'ng-model',也许'ng-change',我只是不知道如何将它应用于一组复选框......？

更新:我已经创建了一个plunker,所以你可以看到我在哪里:http://plnkr.co/edit/lNJNYagMC2rszbSOF95k？p = preview

我有一个Typeahead实例拉入一个列出机场的远程JSON对象,我需要按照"位置组"的方式将它们分组,如下图所示:

...以下是JSON格式化的示例:

{
   "locations":[
  {
     "name":"London Intl Apt (YXU), Middlesex, Ontario, Canada",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b21af",
     "iata":"YXU",
     "locationGroup":"",
     "locationGroupName":""
  },
  {
     "name":"London - Gatwick Apt (LGW), West Sussex, England, United Kingdom",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b28cb",
     "iata":"LGW",
     "locationGroup":"LON",
     "locationGroupName":"London - All Airports (LON)"
  },
  {
     "name":"London - Heathrow Apt (LHR), Greater London, England, United Kingdom",
     "type":"airport",
     "id":"528cc236e4b0ec1df53b28b1",
     "iata":"LHR",
     "locationGroup":"LON",
     "locationGroupName":"London - All Airports (LON)"
  }
 ]
}

因此,如果项目具有"locationGroup"值,则应将其与具有相同"locationGroup"的所有其他项目分组.如果没有'locationGroup',它应该单独列出.

我猜测(假设这是可能的)这应该在我设置Bloodhound引擎时完成 - 可能在Filter中 - 但我真的很难弄清楚如何.任何人都可以帮忙吗？

我是AngularJS的相对新手,并成功使用$ http的GET方法作为基本的概念验证应用程序,我现在正尝试使用JSONP方法从远程URL中提取一些JSON我是得到了.我在这里创建了一个基本的plunker来展示我想要做的事情:http://plnkr.co/edit/Joud0ukAzhgvNM0h9KjB？p = preview

我在我的控制器中使用HTTP请求,如下所示:

    $http({method: 'jsonp', url: 'http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=JSON_CALLBACK'}).
  success(function(data) {
    $scope.countries = data;
    console.log('success');
  }).
  error(function(data) {
    console.log('error');
  });    

...但是我什么都没有回来(除了控制台中的"错误").我知道URL返回有效的JSON(http://ec2-54-229-49-250.eu-west-1.compute.amazonaws.com/country?callback=angular.callbacks._0),但我是只是没有得到任何回报......