更好的方法是在Angular js中避免使用指令或JQuery。
更好的方法是在Angular js中避免使用指令或JQuery。
我在Angular指令方面缺乏经验,并且有一个场景,我无法决定是否应该使用JQuery还是Angular 1指令。
我有一个对象列表,像这样:
[
{
"id":"sdf34fsf345gdfg",
"name":"samson",
"phone":"9876543210",
"email":"abc@gmail.com"
},
{
"id":"sdf34fsf3432fg45gdfg",
"name":"xyd",
"phone":"9876543210",
"email":"xyz@gmail.com"
}
]
我需要将这个列表渲染成这样:
---姓名
|______邮箱
|______手机
|
---姓名
|______邮箱
|______手机
渲染完这个列表后,我应该只允许用户选择邮箱或手机,如果选择了其中一个,相应的对象应被标记为已选中。
有人能向我解释一下如何正确完成这个任务,或者是否有适合这个需求的Angular模块吗?
同时,选择的数据应以以下方式返回:
{
"9876543210":{ //如果选择了手机号码
"name":"samson"
},
"syz@gmail.com":{//如果选择了邮箱
"name":"xyz"
}
}
先行致谢。如果这个问题可以改进或以更好的方式说明,请告诉我。
更好的方法来对抗在AngularJS中使用指令或JQuery的问题
在AngularJS中,使用指令或JQuery可能会导致一些问题。为了解决这些问题,我们可以采用以下方法:
1. 创建一个纯Angular组件,例如"MemberListComponent"。你可以根据你的对象列表来创建这个组件。
import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '/core'; import { Subscription } from 'rxjs/Rx'; @Component({ selector:'memberlist', templateUrl:'memberlist.html', styleUrls: ['memberlist.scss'] }) export class MemberListDirective implements OnInit, OnDestroy { @Input() members: Array; @Output() clicked = new EventEmitter(); constructor() { } ngOnInit() { } ngOnDestroy() { } memberClicked(type: string, member: MemberModel) { this.clicked.emit({ type: type, member: member }); } }
2. 在模板(memberlist.html)中,设置一个点击事件并将事件委托给订阅者。
{{member.lastname}}{{member.firstname}}
3. 在需要使用memberlist指令的组件中,可以通过以下方式获取$event:
memberlistClicked(event) { console.log(event); }
这样就可以解决在AngularJS中使用指令或JQuery时可能出现的一些问题了。同时,你还可以通过阅读Angular官方文档了解更多关于指令的知识。
对于AngularJS的解决方法,你可以创建一个指令,它可以与控制器进行通信。你可以使用require语句来告诉AngularJS需要引入的控制器。
app.directive('memberlist', () => { return { require: '^^someController', restrict: 'E', scope: { members: '=members', }, templateUrl: '/templates/memberlist.html', link: function (scope, someController) { scope.memberClicked = (type, member) => { someController.currentMember = { type: type, member: member }; } } }; });
另一种在AngularJS中的解决方法是使用广播事件和事件监听器。你可以在控制器中创建一个事件监听器来处理广播的事件。你可以在以下链接中找到关于如何使用广播事件的更多信息。
感谢DNRN的建议,希望这些方法对你在AngularJS中解决问题有所帮助。