Menu
I am new to Angular JS and through research it looks like this is not possible but I wanted to double-check/see if there is some alternative solution that will have a similar result.
What I want to do is populate a page from a JSON file, and load a customized li using the url that would be on that JSON file. so something like this:
JSON/inside controller:
function ExCtrl($scope) {
$scope.examples = [
{name:"example",
num: 1,
url:"website.html"}
];
}
JS (inside JS)
<ul ng-controller="ExCtrl">
<li ng-repeat="example in examples">
<div ng-include src="folder/{{example.url}}> </div>
</li>
</ul>
Solution :
<ul ng-controller="ExCtrl">
<li ng-repeat="example in examples">
<div ng-include src="example.url"> </div>
</li>
</ul>
where it is now:
function ExCtrl($scope) {
$scope.examples = [
{name:"example",
num: 1,
url:"folder/website.html"}
];
}
644
from the documentation:
ngInclude|src–{string}– angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in quotes, e.g.src="'myPartialTemplate.html'".
In your case it makes sense to set a custom ngResource. In the controller, inject the resource and query for the JSON, then assign the JSON to a scope variable.
angular.module("foo", "ngResource")
.factory("ResourceType", function($resource){
return $resource("/resourcetype/:id", {id: "@id"}, { "update": {method:"PUT"}});
})
.controller("ExCtrl" function($scope, ResourceType){
$scope.examples = ResourceType.query();
});
You would then set your ng-include url as you loop over your resource.
Also, don't {{}} your variable name.
EDIT:
I was going to give you a Plunker, but it seems to be acting up. Here is inline source that does what you would like. For the sake of clarity, I removed the resource piece. I imagine you will want to put it back when you decide to retrieve the JSON remotely.
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul ng-controller="MainCtrl">
<li ng-repeat="example in examples">
If {{example.url}} were valid, it would load in the div.
<div ng-include="example.url"> </div>
</li>
</ul>
</body>
</html>
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.examples = [
{name:"example",
num: 1,
url:"example.html"}
];
});
Edit: Plunk
http://beta.plnkr.co/edit/JNhqoJoykWKf4iqV0ieJ?p=preview
86
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
