Question

我有一个包含用户名和密码的登录界面，我已使用服务将用户名保存到变量中。（让它为getservice.usrname）

我有一个数据列表，我使用ng-repeat在下一页打印整个数据。我想要的是打印一个特定人的细节，即用户名过滤。

    [{
"username": "vishnu",
"FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
"selectedProject": "createwhimsy",
"task": "fixing bugs",
"time": "1"
 }, {
"username": "seenu",
"FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
"selectedProject": "createwhimsy",
"task": "working on ui",
"time": "2"
    }, {
"username": "sam",
"FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
"selectedProject": "bigiron",
"task": "working on api",
"time": "5"
  },
   {
"username": "vishnu",
"FromDate": "Wed Mar 03 2016 10:56:45 GMT+0530 (India Standard Time)",
"selectedProject": "timetracker",
"task": "ui designing",
"time": "1"
 }]

Answer 1

经典的角度解决方案是使用filter。

这样的事情：

<input type="text" class="form-control" ng-model="query">
<div ng-repeat="user in ctrl.data | filter:query">
 <ul>
        <li>{{user.username}}</li>
        <li>{{user.task}}</li>
    </ul>
</div>

请参阅：https://jsfiddle.net/ronapelbaum/7a7f48o3/

Answer 2

这在angularJS中很简单，这里是示例代码，

在控制器中，

 $scope.list=  [{
    "username": "vishnu",
    "FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
    "selectedProject": "createwhimsy",
    "task": "fixing bugs",
    "time": "1"
     }, {
    "username": "seenu",
    "FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
    "selectedProject": "createwhimsy",
    "task": "working on ui",
    "time": "2"
        }, {
    "username": "sam",
    "FromDate": "Wed Mar 02 2016 10:56:45 GMT+0530 (India Standard Time)",
    "selectedProject": "bigiron",
    "task": "working on api",
    "time": "5"
      },
       {
    "username": "vishnu",
    "FromDate": "Wed Mar 03 2016 10:56:45 GMT+0530 (India Standard Time)",
    "selectedProject": "timetracker",
    "task": "ui designing",
    "time": "1"
  }]

并在HTML文件中

<ul>
   <li ng-repeat="u in list| filter:{username:'vishnu'}">
      // print your items
   </li>
 </ul>

这是plnkr的例子。 http://plnkr.co/edit/gtfikICLQFeGgrgV7I0i?p=preview

使用用户名从数据中排序？

2 个答案: