I am new to angularjs and am having some trouble implementing a simple checklist.
<html lang="en" ng-app>
<body>
<div ng-controller="IdController" class="id-contain">
<ul>
<li ng-repeat="id in ids">{{ id.body }}</li>
</ul>
</div>
</body>
</html>
and in my main.js I have
function IdController($scope) {
$scope.id = [
{ body: 'some' },
{ body: 'boiler' },
{ body: 'plate' }
];
}
However, when I load the page, i get Use of undefined constant id - assumed 'id' Any ideas on where I could have gone wrong?
Edit: I have adjusted the name in the controller from $scope.id to $scope.ids to no avail and when I change the {{}} to [[]] it loads [[ id.body ]] 3 times, but not the value. When I run it with {{}} it is giving me the same error and is parsed as <?php echo id.body; ?>
Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the # symbol to inform the Blade rendering engine an expression should remain untouched.
https://laravel.com/docs/8.x/blade#blade-and-javascript-frameworks
Use #before your angular {{}} blocks:
Your code would be like:
<html lang="en" ng-app>
<body>
<div ng-controller="IdController" class="id-contain">
<ul>
<li ng-repeat="id in ids"> #{{ id.body }} </li>
</ul>
</div>
</body>
</html>
That's a problem with blade, you can change laravel's config for blade template token from {{}} to something else like [[]]
Blade::setContentTags('[[', ']]');
Blade::setEscapedContentTags('[[[', ']]]');
Plus, in your angularjs code you should rename $scope.id to $scope.ids in your controller
UPDATE Blade tokens
EDIT OR you can override angular's tags delimiters
DEMO
HTML:
<div ng-app="main">
<div ng-controller="IdController" class="id-contain">
<ul>
<li ng-repeat="id in ids">[[id.body]]</li>
</ul>
</div>
</div>
JS:
angular.module('main', [])
.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})
.controller('IdController', function ($scope) {
$scope.ids = [
{ body: 'some' },
{ body: 'boiler' },
{ body: 'plate' }
];
});
You html is parsed with the blade parser, if you dont need this page to be parsed with blade parser rename your file from myfield.blade.php to myfile.php
Related
I have an extremely hierarchical JSON structure as a scope variable in my AngularJS controller. I want to loop around different sections of that variable. I thought about using ng-init to specify where in the structure I am. Here is some code:
my_app.js:
(function() {
var app = angular.module("my_app");
app.controller("MyController", [ "$scope", function($scope) {
$scope.things = {
name: "a",
children: [
{
name: "a.a",
children: [
{ name: "a.a.a" },
{ name: "a.a.b" }
]
},
{
name: "a.b",
children: [
{ name: "a.b.a" },
{ name: "a.b.b" }
]
}
]
}
}]);
});
my_template.html:
<div ng-app="my_app" ng-controller="MyController">
<ul>
<li ng-init="current_thing=things.children[0]" ng-repeat="thing in current_thing.children>
{{ thing.name }}
</li>
</ul>
</div>
I would expect this to display a list:
a.a.a
a.a.b
But it displays nothing.
Of course, if I specify the loop explicitly (ng-repeat="thing in things.children[0].children") it works just fine. But that little snippet of template code will have to be run at various points in my application at various levels of "things."
(Just to make life complicated, I can get the current thing level using standard JavaScript or else via Django cleverness.)
Any ideas?
ng-init runs at a lower priority (450) than ng-repeat (1000). As a result, when placed on the same element, ng-repeat is compiled first meaning that the scope property created by ng-init won't be defined until after ng-repeat is executed.
As a result, if you want to use it in this manner, you'd need to place it on the parent element instead.
<div ng-app="my_app" ng-controller="MyController">
<ul ng-init="current_thing=things.children[0]">
<li ng-repeat="thing in current_thing.children>
{{ thing.name }}
</li>
</ul>
</div>
I am trying to get the JSON data using the $http function; I am always getting error for this. Here is my HTML code:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in code">
{{ x.code }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("data.json")
.success(function (response) {$scope.code = response;})
.error(function (response) {alert("Error")})
});
</script>
</body>
</html>
Here is my data.json file:
{
"code":"#include <stdio.h>
int main()
{
printf('Hello world');
return 0;
}"
}
Here is the plunker http://plnkr.co/edit/Q4dsCjHM3ykgp2SaHw35?p=preview
Do change your data to below.Basically it should be string, use pre tag for line break & then replace enter by \n
{
"code": "#include <stdio.h>\n int main()\n printf('Hello world');\n return 0;\n}"
}
HTML
<ul>
<li ng-repeat="x in code">
<pre>{{ x }}</pre>
</li>
</ul>
Working Plunkr
Your JSON is poorly formatted. The string line of code should be on one line e.g.,
{
"code": "#include <stdio.h> int main() ...."
}
You can always validate your JSON at jsonlint.com
Your JSON is not well formated.
JSON
{
"code":"#include <stdio.h>int main(){printf('Hello world');return 0;}"
}
Then, you can access to the code field in your request :
Controller
$http.get("data.json")
.success(function (response) {
$scope.code = response.code;
})
.error(function (response) {
alert("Error");
});
I'm trying to load in HTML from JSON so I can build up dynamic pages and build a simple LMS.
I've got the following code:
Controller
.controller('TestCtrl', function ($scope, $stateParams) {
$scope.options = [
{ row: 1, type: "text", data:"<input type='text' text='no work' placeholder='Email'>", title: 'Number One' },
{ row: 1, type: "text", data: "<p>this works</p>", title: 'Number Two' },
{ row: 1, type: "textbox", data: "<div class='ho'>this works</div>", title: 'Number Two' }
];
});
HTML
<ion-view view-title="Test List">
<ion-content>
<ion-item ng-repeat="item in options">
<div ng-bind-html="item.data"></div>
</ion-item>
</ion-content>
</ion-view>
The second two work however the first one returns nothing. It renders like (ignore the red arrow):
I think this might give you some insight into what you need to do. I've put together a filter that will make the HTML safe to use in an ng-bind-html directive. Here's a Plunk showing it working.
app.controller('MyController', function($scope, $sce) {
$scope.someHtmlContent = "<i>Label:</i> <input name='test'>";
$scope.h = function(html) {
return $sce.trustAsHtml(html);
};
});
app.filter('trustAsHtml', function($sce) { return $sce.trustAsHtml; });
This is a non-Ionic version of the view showing it:
<body ng-controller="TestCtrl">
<ul>
<li ng-repeat="item in options">
<div ng-bind-html="item.data | trustAsHtml"></div> <!-- note the filter -->
</li>
</ul>
</body>
Basically I created a filter ('trustAsHtml') that tells AngularJS to trust your HTML by making use of the $sce service's trustAsHTML() method (part of the ngSanitize module). You have to be careful that the HTML you are supplying truly is safe against attack code coming from users and such, though.
Try change the first input tag attribute from 'text' to 'value'
data:"<input type='text' value='no work' placeholder='Email'>",
Close the input tag.
data:"<input type='text' value='no work' placeholder='Email' />"
This is really an angular anti pattern (html in your models). There is a chance that the input is being stripped out during interpolation (like a script tag would be).
Take a look at the documentation for $ngSanitize and $sce. ng-bind filters out unsafe html with $sanitize (and I believe this includes input elements). You can override this (not recommended) using $sce to tell angular the text is trusted and does not need to go through the sanitizer.
So I'm teaching myself Angular.js. Following a tutorial I found online, I created a RESTful API with Laravel for storing URLS. There's basic authentication set up and currently user id 1 is signed in. I want to grab the JSON that's being returned here in the index function which is all the URLs in the database where the user_id matches the authorized user's id:
public function index()
{
$urls = Url::where('user_id', Auth::user()->id)->get();
return Response::json(array(
'error=> false,
'urls' => $urls->toArray()),
200
);
}
I believe JSON is being returned and when I visit my local site http://readitlater.loc/api/v1/url I get an array of objects. On my index page, I have the ng-app directive being defined as an attribute of the html element:
<html lang="en" data-ng-app="">
I have a script defining a constructor function:
<script>
function mainController($scope, $http)
{
$http.get("http://readitlater.loc/api/v1/url/")
.success(function(response) {$scope.urls = response;});
}
</script>
That readitlater.loc/api/v1/url is my route to the index in my API. And when I type it in the browser I get an array of objects which I'm guessing is the JSON being created. For some reason, I can't get it to display in the browser down here:
<body class="container" data-ng-controller="mainController">
<ul class="list-group">
<li class="list-group-item" ng-repeat="address in urls">
{{ address.url }}
</li>
</ul>
As per your comments above, your $scope.urls has urls object and this object contains url key. so you would change your code as follows
<ul class="list-group">
<li class="list-group-item" ng-repeat="address in urls.urls">
{{ address.url }}
</li>
</ul>
It's often handy to validate the variables you are using contain what you think. You can do a console.log or console.dir when you set the value, but displaying them in the HTML right where you are trying to use them can help with scope problems too. Here I would change your code to this:
<pre>{{urls|json}}</pre>
<ul class="list-group">
<li class="list-group-item" ng-repeat="address in urls">
{{ address.url }}
<br/>JSON: {{address|json}}
</li>
</ul>
This should quickly show you that your $scope.urls object looks like this:
{
error:false,
urls: [
{ description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
]
}
THAT is your $scope.urls object, so when you repeat over it you will get the properties of the object, 'false' and the array that I assume is what you mean by urls:
// Code goes here
var app = angular.module('MyApp', []);
var ctrl = app.controller('MyCtrl', function($scope) {
$scope.name = "Jason Goemaat";
$scope.urls = {
error:false,
urls: [
{ description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<h1>Hello, {{name}}!</h1>
<pre>{{urls|json}}</pre>
<ul class="list-group">
<li class="list-group-item" ng-repeat="address in urls">
{{ address.url }}
<br/>JSON: {{address|json}}
</li>
</ul>
</div>
So if you want $scope.urls to be your array, you can set it directly to the urls property on your return object in the $http call:
$http.get("http://readitlater.loc/api/v1/url/")
.success(function(response) {$scope.urls = response.urls;});
Now your ng-repeat will be iterating over the array as I think you intend...
var app = angular.module('MyApp', []);
var ctrl = app.controller('MyCtrl', function($scope) {
$scope.name = "Jason Goemaat";
$scope.urls = [
{ description: "A Great Blog", id: 2, url: "fideloper.com", user_id: 1 }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<h1>Hello, {{name}}!</h1>
<pre>{{urls|json}}</pre>
<ul class="list-group">
<li class="list-group-item" ng-repeat="address in urls">
{{ address.url }}
<br/>JSON: {{address|json}}
</li>
</ul>
</div>
I have following problem. I would like to add a controller, whose name is included in the object. Object I receive from ng-repeat.
This is array:
$scope.components = [
{
name: "box",
controller: "BoxCtrl"
}
/*others components*/
];
And this is HTML code:
<ul>
<li ng-repeat="c in components" ng-controller="{{c.controller}}">
{{c.name}}
</li>
</ul>
But I have following
error.
Any ideas how to solve?
The ngController directive expects an instance of a controller but you give him a string.
This should do the job :
In your controller :
$scope.components = [
{
name: "box",
controller: BoxCtrl //Remove the quotes
}
/*others components*/
]
In your view :
<ul>
<li ng-repeat="c in components" ng-controller="c.controller">
{{c.name}}
</li>
</ul>
EDIT: Here is a plunker : http://plnkr.co/edit/sLdZT4UPmgM7Is8SFyrb