Menu
I am trying to change template of option on the fly for a select element. Here is what I am trying to do, I have select option, which will allow user to select what kind of information they want to see when selecting a student. If the user chose 'Basic' then I show only Id and Name properties of Student class. If the user chooses 'Detail' then I show, Id, Name and Grade. The current implementation is
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script type="text/ng-template" id="Basic">
<select ng-model="selectedItem">
<option ng-repeat="student in Students">
{{student.Id}} - {{student.Name}}
</option>
</select>
</script>
<script type="text/ng-template" id="Detail">
<select ng-model="selectedItem">
<option ng-repeat="student in Students">
{{student.Id}} - {{student.Name}} -- {{student.Grade}}
</option>
</select>
</script>
</head>
<body>
<div ng-controller="TemplateCtrl">
Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select>
<div ng-include="detailLevel.Id"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/TemplateCtrl.js"></script>
</body>
</html>
As you can see I am duplicating the code in both the ng-template 'Basic' and 'Detail'. Initially I was trying something like the following
<script type="text/ng-template" id="Basic">
{{student.Id}} - {{student.Name}}
</script>
<script type="text/ng-template" id="Detail">
{{student.Id}} - {{student.Name}} -- {{student.Grade}}
</script>
but when I try to do ng-include in side tag, browsers did not like. I might be missing something simple here, what I am doing wrong to create the duplicate code smell here?
Thanks,
263
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
ngInclude creates a new child scope which inherits scope values from the parent controller.
The primary purpose of the ng-include directive is used to fetch, compile, and include an external HTML file in the main AngularJS application. These are added as child nodes in the main application. The ng-include attribute's value can also be an expression, that returns a filename.
"ng" stands for Next Generation, as Angular is the next generation of HTML .
Maybe you can try using the ng-switch directive, instead of templates. Then the following should work:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
</head>
<body>
<div ng-controller="TemplateCtrl">
Details Level: <select ng-model="detailLevel" ng-options="c.Id for c in Details"></select>
<div ng-switch="detailLevel">
<div ng-switch-when="Basic">
<select ng-model="selectedItem">
<option ng-repeat="student in Students">{{student.Id}} - {{student.Name}}</option>
</select>
</div>
<div ng-switch-when="Detail">
<select ng-model="selectedItem">
<option ng-repeat="student in Students">{{student.Id}} - {{student.Name}} -- {{student.Grade}}</option>
</select>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/TemplateCtrl.js"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
