Question

如何在点击单选按钮时过滤用户详细信息？

*实际上，我想过滤列表页面中的用户问题，因此我创建了一个plunker。如果我是经过身份验证的用户（或）管理员，我只想在列表页面中过滤myquestions。

例如： - 在plunker displayName中Table 1表示如果点击My Question单选按钮，我的问题只需要filter

我的HTML单选按钮： -

<input type="radio" name="myquestion" data-ng-model="myquestion.user.displayName" value="myquestion" >

我的HTML过滤器： -

    ng-repeat="question in questions | filter: myquestion"

**My Html Data:-**

<div ng-repeat="question in questions | filter: myquestion">
    <small>
                      Posted on
                      <span data-ng-bind="question.created | date:'mediumDate'"></span>
                      <span data-ng-bind="question.user.displayName"></span>
                  </small>

  </div>

我的控制器数据： -

$scope.questions = [
{
"_id": "583433ddc021a5d02949a51b",
"user": {
"_id": "5834336ac021a5d02949a51a",
"displayName": "mani R",
"location": "ICF",
"dob": "1991-10-05T18:30:00.000Z",
"religion": "Christian",
"roles": [
"user"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Moral Ethics",
"content": "Dhoni",
"title": "which batsman is best in the world?",
"created": "2016-11-22T12:02:37.376Z"
},
{
"_id": "582c34b3ff26bd603e1e5383",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [],
"users": [],
"comments": [
{
"created": 1479365394684,
"email": "ms@e21designs.com",
"name": "Table 1",
"commentText": "Dhoni"
}
],
"friend_tag": [],
"emotion": "Confused",
"category": "Environment & Health",
"content": "sachin?",
"title": "who is best player in this world?",
"created": "2016-11-16T10:28:03.859Z"
},
{
"_id": "582c3418ff26bd603e1e5382",
"user": {
"_id": "582c1f4b53cf7fec2ddf282e",
"displayName": "selvam R",
"dob": "1991-10-04T18:30:00.000Z",
"roles": [
"kp"
],
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 0,
"upvoters": [],
"category": "Environment & Health",
"content": "he is tennis player",
"created": "2016-11-16T10:25:28.835Z"
},
{
"_id": "582ad554714543e037cf3bf2",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Moral Ethics",
"created": "2016-11-15T09:28:52.403Z"
},
{
"_id": "5821e7c667b70aac2b8fdfdc",
"user": {
"_id": "58072aba0f82a61823c434df",
"displayName": "Table 1",
"dob": "1991-10-04T18:30:00.000Z",
"location": "Icf",
"religion": "Hindu",
"roles": [
"admin"
],
"profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
},
"__v": 1,
"upvoters": [
"ms@e21designs.com"
],
"upvotes": 1,
"category": "Religion & Culture",
"created": "2016-11-08T14:57:10.354Z"
}
]

我们尝试alt="{{vm.authentication.user.displayName}}"，但效果不佳。

Answer 1

我认为你要做的是根据登录用户的displayName过滤列表，对吧？我不知道你们是否有用户身份验证的服务我只是假设表1是给定的登录用户。我使用ng-change来检测我是否更改了单选按钮以过滤所有和问题。

在我的控制器上：

$scope.authUser = {
    "_id": "58072aba0f82a61823c434df",
    "displayName": "Table 1",
    "dob": "1991-10-04T18:30:00.000Z",
    "location": "Icf",
    "religion": "Hindu",
    "roles": [
      "admin"
    ],
    "profileImageURL": "./modules/users/client/img/profile/uploads/c756711556ab6864f408697c7a98aedc"
};

on html：

   <div class="col-md-3" id="donate">
      <label class="green">
        <input type="radio" name="myquestion" ng-model="myQuestion" value="myquestion" ng-change="stateChange(myQuestion)">
        <span>My Questions</span>
      </label>
      <label class="green">
        <input type="radio" name="myquestion" ng-model="myQuestion" value="all" ng-change="stateChange(myQuestion)">
        <span>All</span>
      </label>
   </div>

   <div ng-repeat="question in questions | filter: { user.displayName: searchText }">
      <small>
        Posted on
        <span data-ng-bind="question.created | date:'mediumDate'"></span>
        <span data-ng-bind="question.user.displayName"></span>
      </small>
   </div>

对于工作样本，我编辑了你的plunkr。链接在这里 http://plnkr.co/edit/U5M29NMfvtY0vTnQyjmT?p=preview

单击单选按钮时过滤用户详细信息？

1 个答案: