Angularjs：將一組按鈕的輸出連接到自定義過濾器

Question

我正在嘗試編寫一個應用程序，讓您選擇一組按鈕，每個按鈕連接到另一個數組搜索的不同數組限制。我已將按鈕連接到可能的限制數組，並使用ng-repeat爲該陣列中的每個限制創建一個按鈕。

我無法得到的是一種讓每個按鈕將其限制添加到數組以便過濾器搜索我的數據庫的方法。

Answer 1

我已付出你的代碼，在這裏看到：http://plnkr.co/edit/uyr8eSHMe3sFf6Pzwf58?p=preview

我相信你沒有問如何過濾你的食譜，但如何讓過濾字符串到控制器？

控制器

$scope.addDietaryRestriction = function (kind, restr) { 
    console.log ($scope.filter); 
    $scope.filter[kind] = restr; 
    console.log ($scope.filter); 
    } 


    $scope.submit = function() { 
    console.log ($scope.filter); 
    console.log ($scope.filterConfig); 
    } 

HTML

<div> 
    <h2>What courses?</h2> 
     <button ng-repeat="course in filterConfig.courses" class="buttons" ng-click="addDietaryRestriction('course', course)"> 
    {{course}}</button> 
    <br><br> 
    </div> 

心靈在ng-click()的addDietaryRestriction()調用有兩個參數。

就個人而言，我還創建按鈕組與NG-重複：

$scope.filterConfig = { 
    dietaryRestrictions: { 
     headline: "Dietary Restrictions:", 
     values: [ 
      'Vegetarian', 
      'Meat', 
      'Nuts', 
      'Wheat', 
      'Dairy', 
      'Kosher', 
      'Halal' 
     ] 
    }, 
    courses: { 
     headline: "What courses?:, 
     values: [ 
     'starter', 
     'main', 
     'dessert' 
     ] 
    }, .... 

，並在HTML：

<div ng-repeat="(key, value) in filterConfig track by $index"> 
    <h2>{{value.headline}}</h2> 
     <button ng-repeat="course in value.values" class="buttons" ng-click="addDietaryRestriction(key, course)"> 
    {{course}}</button> 
    <br><br> 
    </div>