添加控件到ng-repeat來過濾數據

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

簡化樣品

首先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

來源

2015-10-07 boris

這聽起來更像是一個規範，而不是對合法代碼問題的幫助。應該顯示你的嘗試或看起來像你要求別人爲你做你的工作 – charlietfl

工作Plunker：http://plnkr.co/edit/jcb6SfKVPkwt7FFCZFHX?p=preview

你需要做的第一件事是添加一個ng-model屬性爲select。我已經將此添加爲技術屬性，以便您輕鬆找到它。

<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 
    }); 
}

我使用lodash在getTechBySlug，正如其名國，才能得到正確的基於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>

這段代碼獲得基於當前段塞的過濾器，然後使用該功能過濾人員。它將結果存儲在變量filteredPeople中，該變量在span中用於在沒有結果時顯示消息。

來源

2015-10-07 00:53:52

這是一個很好的答案，謝謝。我希望它不需要另一個圖書館，但是現在它再次非常「苗條」。 – boris

添加控件到ng-repeat來過濾數據

回答

相關問題