AngularJS orderBy - 按对象的字符串属性排序?

时间:2017-03-10 17:34:50

标签: javascript angularjs sorting

我试图按照添加的日期和列出的优先级对任务列表中的项目进行排序。我已经按日期排序了,但是如何对项目进行排序,以便那些具有“' HIGH'财产首先在名单中组织?

编辑:当从“排序依据”中选择此选项时,我需要按HIGH排序。选择任务列表上方的框。

Codepen:http://codepen.io/anon/pen/ryyQzy

HTML:

def extract_function_from_string(content, function_index=0):
    import ast
    tree = ast.parse(content, mode='exec')
    function = tree.body[function_index]
    module = ast.Module([function])
    exec(compile(module, filename="<ast>", mode='exec'))
    return locals()[function.name]

content = "def my_function(x):\n    return x**2"
my_function = extract_function_from_string(content) # extract_function_from_string ???
print(my_function(5)) # prints 25

JS:

<md-list class="md-padding">

                   <div layout="row">

                        <md-input-container class="md-block" flex="70">

                            <input type="text" ng-model="search" name="search" placeholder="Search by Task Name"></input>  

                        </md-input-container>

                        <md-input-container flex="30">

                            <md-select name="priority" ng-model="task.priority" placeholder="Sort By">

                                <md-option value="Low">Newest First</md-option>

                                <md-option value="HIGH">High Priority First</md-option>

                            </md-select>

                        </md-input-container>

                    </div>

                    <md-subheader class="md-no-sticky">Current Tasks ({{taskList.length}})</md-subheader> 

                    <md-list-item class="md-3-line" ng-repeat="task in taskList | orderBy:sortByNewest | filter:search">

                       <div class="md-list-item-text" layout="column">

                            <p>{{task.name}}</p>

                            <p>Priority: {{task.priority}}</p>

                            <span class="weak">Added {{task.addedOn | date: 'medium'}}</span>

                        </div>

                        <md-checkbox class="md-secondary" ng-model="task.completed"></md-checkbox>

                        <md-divider ng-if="!$last"></md-divider>

                    </md-list-item>

                </md-list>

2 个答案:

答案 0 :(得分:0)

您需要使用ng-model="search.name" and ng-model="search.priority"。然后它将从search对象中读取所有搜索条件。(filter:search

查看更新的Codepen

请更新您的观点,如下所示: 按任务名称模型搜索ng-model="search.name"而不是ng-model="search" 按型号排序为ng-model="search.priority"而不是ng-model="sortBy"

<div layout="row">

  <md-input-container class="md-block" flex="70">

    <input type="text" ng-model="search.name" name="search" placeholder="Search by Task Name"></input>

  </md-input-container>

  <md-input-container flex="30">

    <md-select name="priority" ng-model="search.priority" placeholder="Sort By">

      <md-option value="Low">Newest First</md-option>

      <md-option value="HIGH">High Priority First</md-option>

    </md-select>

  </md-input-container>

</div>

答案 1 :(得分:0)

orderBy需要它应该排序的对象的属性名称。因此,option中的select应该像这样定义这些属性名称:

<md-select name="sortBy" placeholder="Sort By" ng-model="sortBy">
  <md-option value="addedOn">Newest First</md-option>
  <md-option value="priority">High Priority First</md-option>
</md-select>

如果orderBy遇到这些属性中的字符串,它将按字母顺序对数组进行排序。所以这已经很方便了,因为 H igh在 L 之前出现。

来自Angular文档:

  

对于大多数用例来说,默认的内置比较器应该足够了。简而言之,它按字母顺序比较数字,字符串(并且不区分大小写),对象回退到使用原始集合中的索引,并按类型对不同类型的值进行排序。

https://docs.angularjs.org/api/ng/filter/orderBy