添加控制到ng-repeat以過濾數據

Question

我有一些json數據，我用ng-repeat輸出，我添加了一些表單控件來過濾另一個json的數據輸出。

簡化樣本

第一個JSON數據：

var technologies = [
  {"id":"5", "slug":"mysql", "label":"MySQL", "category":"database"},
  {"id":"4", "slug":"html", "label":"HTML", "category":"markup"}
]

和輸出：

<ul>
  <li ng-repeat="tech in technologies">
    <span>{{tech.label}}</span> 
    <span><label>required expertise 
      <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select></label>
    </span>
  </li>
</ul>

（實際上，此時的技術已經從用戶在不同頁面上做出的另一個選擇中過濾掉了，但我認為這沒有區別）

第二個json包含我想用作過濾器的專業屬性

var people = [
{
  'label': 'MySQL',
  'slug': 'mysql',
  'talents':[
    {
      'name': 'Stanislav Lem',
      'expertise': 5,
      'desire': 0,
      'last_used': '2009-01'
    },
    {
      'name': 'Ijon Tichy',
      'expertise': 1,
      'desire': 5,
      'last_used': '2011-06'
    }
  ]
},  ...
]

......現在這被用作了

<ul>
  <li ng-repeat="item in people">
    {{item.label}}<br>
    <ul>
      <li ng-repeat="person in item.talents">{{person.name}} &middot; Expertise: {{person.expertise}}</li>
    </ul>
  </li>
</ul>

我需要的是一個過濾器，它使用第一個輸出中的選項來過濾第二個輸出。 例如，當MySQL要求的專業知識設置為“2”時，只顯示Stanislav Lem。 實際上，如果沒人匹配專業知識，我還需要一個“沒有找到結果”的消息，但我想我可以自己解決這個問題。

Plunker樣本在這里： http ：//plnkr.co/edit/B0aQp9aCJ2g4OM6fZ3qe?p=preview

Answer 1

Working Plunker： http ：//plnkr.co/edit/jcb6SfKVPkwt7FFCZFHX？p =preview

您需要做的第一件事是在select添加ng-model屬性。 我已將此添加為該技術的屬性，因此您可以輕松找到它。

<select ng-model="tech.required">

接下來，我向控制器添加了以下兩個函數，以幫助過濾第二個列表：

$scope.getFilterForSlug = function(slug) {
    var technology = getTechBySlug(slug);

    return function(person) {
        return person.expertise >= (technology.required || 0);
    }
}

function getTechBySlug(slug) {
    return _.find($scope.technologies, {
        slug: slug
    });
}

正如名稱getTechBySlug ，我在getTechBySlug中使用lodash，以獲取基於slug的正確技術對象。 使用它， getFilterForSlug返回一個函數，該函數將人的專業水平與select所需的級別進行比較。 如果未選擇選項，則將所需級別設置為0。

最后，在HTML中，我添加了以下內容：

<ul>
    <li ng-repeat="person in filteredPeople = (item.talents | filter: getFilterForSlug(item.slug))">{{person.name}} · Expertise: {{person.expertise}}</li>
</ul>
<span ng-if='!filteredPeople.length'>No Results!</span>

此代碼根據當前slug獲取過濾器，然后使用該函數過濾人員。 它將結果存儲在變量filteredPeople ，該變量在span用於在沒有結果時顯示消息。