javascript-向ng-repeat添加控件以过滤数据

我有一些用ng-repeat输出的json数据,并且添加了一些表单控件来过滤来自另一个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.实际上,如果没有人匹配我的专业知识,我还需要一条“未找到结果”消息,但是我想我可以自己弄清楚那部分.

柱塞样品在这里：http://plnkr.co/edit/B0aQp9aCJ2g4OM6fZ3qe?p=preview

解决方法:

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

您需要做的第一件事是将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中使用lodash来获取基于段的正确技术对象.使用它,getFilterForSlug返回一个函数,该函数将人员的专业知识水平与选择的期望水平进行比较.如果未选择选项,则将所需级别设置为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中,该变量在范围中用于在没有结果时显示消息.

标签：angularjs-filter,angularjs,ng-repeat,json,javascript
来源： https://codeday.me/bug/20191119/2037579.html