2016-11-28 98 views
0

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

Plunker

*其实,我想过滤列表页中的认证用户的问题,所以我创建了一个plunker。如果我是经过身份验证的用户(或)管理员,我只想在列表页面中过滤myquestions

例如: -在plunker我displayName是,如果我点击My Question单选按钮Table 1意味着,我的问题,只需要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": "[email protected]", 
"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": [ 
"[email protected]" 
], 
"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": [ 
"[email protected]" 
], 
"upvotes": 1, 
"category": "Religion & Culture", 
"created": "2016-11-08T14:57:10.354Z" 
} 
] 
  • 我们试过alt="{{vm.authentication.user.displayName}}",但它不能正常工作。

回答

0

我想你试图做的是过滤登录用户的displayName列表基础,对吧?我不知道你们是否有用户认证服务我只是假设表1是给定的登录用户。我使用ng-change来检测单选按钮是否改变,以过滤所有和myquestions。

我控制器上:

$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" 
}; 

对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

+0

感谢您的宝贵答案,请看看我的plunker我给了那里的单选按钮,我们期待'单选按钮'onclicking'它应该只过滤记录的用户问题...... 。例如'表1'记录意味着'表1'的细节只需要显示...你的答案几乎完成了....但单选按钮过滤器方法缺失,所以请帮助我这个...然后我们有'服务',所以请给我确切的解决方案,谢谢.... –

+0

任何解决方案? ...在我的'本地主机'过滤器正在完美地使用这个过滤器'ng-repeat ='在vm.questions | filter:vm.authentication.user.displayName“中提出问题,但是我们期待'点击' '单选按钮'它需要过滤....所以我如何在收音机输入中使用这个...请看看我的闯入者并更新解决方案......谢谢.. –

+0

对于迟到的回复感到抱歉。我更新了我的答案,希望它可以帮助你。 – Vicruz

相关问题