Angular equivalent of AngularJS' ng-init with Default Values within Scope
Question
I'm transitioning from NGJS to NG and trying to recode my previous application to practice.
I stumbled upon the new NgInit where initializations are done in Angular's Component.
What I'm trying to achieve is to initialize a value WITHIN the scope to be used as a toggle to hide and unhide HTML elements. I'm trying to solve this without looping within ngOnInit() {} to initialize for each object within the array. ( See ng-init in ng-repeat block )
Below is a working copy of the scenario I'm trying to achieve:
angular.module("app", []) .controller("controller", function($scope) { $scope.init = function() { $scope.modules = [ { label: 'Module A', children: [ 'Module A - 1', 'Module A - 2', 'Module A - 3' ] }, { label: 'Module B', children: [ 'Module B - 1', 'Module B - 2', 'Module B - 3' ] }, { label: 'Module C', children: [ 'Module C - 1', 'Module C - 2', 'Module C - 3' ] } ]; }; });
.child { padding-left: 24px; padding-top: 8px; padding-bottom: 8px; } .parent { padding: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="app" ng-controller="controller" ng-init="init()"> <div class="parent" ng-repeat="module in modules" ng-init="toggle=true"> {{module.label}} <button ng-click="toggle = !toggle">toggle</button> <span ng-if="toggle" id="child-group"> <div class="child" ng-repeat="child in module.children"> {{child}} </div> </span> </div> </body>
Here's a Plunker if you prefer: https://plnkr.co/edit/JDBBPLkr21wxSe2dlRBv?p=preview
3 answers
solution1
2 2018-03-22 08:07:45
Implement OnInit while declaring the component's class and move your initialization code to ngOnInit function.
@Component({
...
})
export class componentClass implements OnInit {
...
ngOnInit() {
// initialization code block
}
}
Mention that Angular(Version2+) provides life hook for a component from been created to been destroyed.
For ng-init at ng-repeat part, From Angular2, you should use ngFor instead and ngFor only allows a limited set of local variables to be defined, see DOC .
solution2
2 ACCPTED 2018-03-22 09:43:33
You could do it like this. You loop over your array with *ngFor. The button toggles the corresponding boolean value, which defines if your element is shown or not (with the *ngIf directive)
@Component({
selector: 'my-app',
template: `
<div *ngFor="let module of modules; let i = index">
<button (click)="show[i] = !show[i]">toggle</button>
<h2>{{module.label}}</h2>
<div *ngIf="show[i]">
<li *ngFor="let child of module.children">
{{child}}
</li>
</div>
</div>
`,
})
Then initialize your variables:
export class AppComponent {
modules:any[];
show:boolean[];
constructor() {
this.modules = [
{
label: 'Module A',
children: [
'Module A - 1',
'Module A - 2',
'Module A - 3'
]
},
{
label: 'Module B',
children: [
'Module B - 1',
'Module B - 2',
'Module B - 3'
]
},
{
label: 'Module C',
children: [
'Module C - 1',
'Module C - 2',
'Module C - 3'
]
}
];
this.show = this.modules.map(()=>true);
}
}
solution3
0 2018-03-22 08:15:26
I did not understand your request, could you explain yourself better? why do not you try to use the @component ...
@Component({
selector: 'tag-selector',
templateUrl: './pagina.html',
styleUrls: ['./pagina.css']
})
export class Controller{
your code
}
Edit:
if you declare the $scope out of Init, it should work anyway
angular.module("app", [])
.controller("controller", function($scope) {
$scope.init = function() {
};
$scope.modules = [{
label: 'Module A',
children: [
'Module A - 1',
'Module A - 2',
'Module A - 3'
]
}, {
label: 'Module B',
children: [
'Module B - 1',
'Module B - 2',
'Module B - 3'
]
}, {
label: 'Module C',
children: [
'Module C - 1',
'Module C - 2',
'Module C - 3'
]
}];
});
I'm sorry, but I'm not sure I fully understood the question ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.