This is an AngularJS syntax question.
{ "key-part": "value-part" } is a valid JSON object. However, in AngularJS, {{ x.key-part }} is an expression. It does not return "value-part" but returns 0. Any idea how to escape the '-'?
Yes, you may ask why use "key-part" instead of "key_part". Well, I have no control over that.
Thanks for any help.
You can access attributes of an object like a standard Javascript object : https://www.w3schools.com/js/js_properties.asp
So <span>{{myObject['attr']}}</span> work
"use strict";
angular.module("demo", [])
.controller("MainController", MainController);
function MainController() {
var vm = this;
vm['da-ta'] = "data";
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo" ng-controller="MainController as main">
<div ng-bind="main['da-ta']"></div>
</div>
Try {{ x["key-part"] }} instead of {{ x.key-part }}.
Working Demo
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.x = { "key-part": "value-part" };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{ x["key-part"] }}
</div>
Related
testing:{"name":"Mohan,Rahul,Kanal,Rajesh,Gokul,Ramesh"}
Suppose i want first three name bind into label using angular ng-repeat.is it possible.Help me.Thanks in advance
Please review below code it may helpful to resolve your issue.
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in arr | limitTo:3">{{x}}</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.arr = [];
$scope.cars = {name: "Audi,BMW,Dodge,Fiat,Ford,Volvo"};
$scope.arr = $scope.cars.name.split(",");
});
</script>
</body>
</html>
Try like this.
var app = angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
$scope.testing={"name":"Mohan,Rahul,Kanal,Rajesh,Gokul,Ramesh"}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<div ng-repeat="(key,value) in testing.name.split(',') | limitTo:3 ">
<p >{{value}}</p>
</div>
</div>
You can use ng-repeat:
<label>
<span ng-repeat="name in testing.name.split(',') | limitTo:3">
{{name}}<span ng-show="$index<2">,</span>
</span>
</label>
Another solution: This shows first three names in array format:
{{testing.name.split(',') | limitTo:3}}
Another solution: You can split the string and then join first three into another scope variable and bind to it.
var arr = $scope.testing.name.split(',');
$scope.labelStr = "";
for(var i=0; i<3; i++) {
$scope.labelStr += arr[i] + ',';
}
$scope.labelStr = $scope.labelStr.substr(0, $scope.labelStr.length-1);
The ng-repeat is only showing the first 2 elements of the array (there are 25). What is wrong?
I'm a newbie with Angular. I am lost with the cause of it, no errors in console. Any suggestions?
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts" track by $index>
<p>{{posts.data.children[$index].data.ups}}</p>
<p>{{posts.data.children[$index].data.title}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
var vm = this;
vm.mydata = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.mydata = response.data;
$scope.posts = vm.mydata;
//console.log(vm.mydata);
//console.table(vm.mydata);
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
Final code corrected. This is a very basic script to manage the extraction of posts in the Reddit's front page and displayed it in descending order by upvotes. Thank you all for your help! See code below:
<!DOCTYPE html>
<html>
<!-- _________________________________________________________-->
<!-- Framework: AngularJs -->
<!-- Author: Vanessa Torres -->
<!-- Date: March 30, 2016 -->
<!-- Description: Reddit's Front page posts extraction -->
<!-- _________________________________________________________-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts.data.children | orderBy:'-data.ups'" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.data.title}}</p>
<p>{{post.data.url}}</p>
</li>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.posts = [];
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
$scope.posts = response.data;
console.table(vm.mydata);
//
}, function(response) {
$scope.posts = "Something went wrong";
});
});
</script>
</body>
</html>
Because you are iterating over posts which have basically two properties only ups and title
Use:
<li ng-repeat="post in posts.data.children" track by $index>
<p>{{post.data.ups}}</p>
<p>{{post.title}}</p>
</li>
The HTML should be as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as posts">
<li ng-repeat="post in posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
This iterates inside the posts array and the value of each post keys (ups and title) is displayed. Please check the documentation for ng-repeat (https://docs.angularjs.org/api/ng/directive/ngRepeat) for the correct format of using track by $index.
As a basic coding standard, you need not use var vm = this; along with $scope. If you are using the vm variable, then inside routes (or inside directives), where you associate each route (or directive) with a controller, you can add an extra field controllerAs for aliasing the controller. Use this alias name in the HTML code to access the vm variable. In your example, you can change it as given below:
<div ng-app="myApp" id="posts" ng-controller="myCtrl as postsCtrl">
<li ng-repeat="post in postsCtrl.posts track by $index">
<p>{{post.data.children.data.ups}}</p>
<p>{{post.data.children.data.title}}</p>
</li>
</div>
And in the scripts tag:
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($http) {
var vm = this;
vm.posts = '';
$http.get("http:/www.reddit.com/.json")
.then(function(response) {
vm.posts = response.data;
}, function(response) {
vm.posts = 'Something went wrong';
});
});
</script>
Here when i click on cartDetails the dynamic scope variable x.SmId value need to be passed to the bellow function and in alert box need to display the parameter .How can we do this one in angular js?
<div ng-app="" ng-controller="MyCtrl">
<div ng-repeat="x in names">
<div ng-click="cartDetails('{{x.SmId}}')">
<div>{{x.name}}</div>
</div>
</div>
</div>
<script>
angular.module('MyApp', [])
.controller('MyCtrl', ['$scope', '$http', function($scope, $http) {
$scope.search = function(param) {
$http.get('AngularJs-Response.jsp?mid='+param).success(function(response) {
$scope.names = response;
});
};
$scope.cartDetails = function(smid) {
alert(smid);
};
}]);
</script>
Use simple:-
ng-click="cartDetails(x.SmId)"
I tried to use:
ng-click="cartDetails(x.SmId)"
but it simply x.SmId as string, its not replaced by value. After reading few more articles, I found a solution like below:
<div ng-click="cartDetails('{{x.SmId}}')">
Its a working solution in AngularJS v1.3.9
I'd like to pass HTML back to the webpage but it is coming through as literal. Any ideas what I'm doing wrong?
HTML:
<div ng-app="app" ng-controller="ctrl">
{{price}}
<br>
Only <strike>$49</strike> $29
</div>
Angular:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope,$sce){
$scope.price = $sce.trustAsHtml('Only <strike>$'+49+'</strike> $'+29);;
});
Output:
Only <strike>$49</strike> $29
Only $49 $29
Example: http://jsfiddle.net/eyks7zu9/3/
Below is your code, with a <span> tag added that has an ng-bind-html value. I could be totally wrong, as I'm not the best with angular myself, but I don't believe that what you are trying to do will work as you intend as Angular tries to keep the Sandbox model pretty rigid with regards to HTML injection.
var app = angular.module('app', []);
app.controller('ctrl', function($scope, $sce) {
$scope.price = $sce.trustAsHtml('Only <strike>$' + 49 + '</strike> $' + 29);;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<span ng-bind-html="price"></span>
<br>Only <strike>$49</strike> $29
</div>
I'm using the Controller as in my view as follows:
<body ng-controller="MainCtrl as main">
<div ng-controller="ChildCtrl as child">
{{ main.parentValue }} + {{ child.childValue }}
</div>
</body>
Defining my controller like this:
app.controller('MainCtrl', function($scope) {
this.parentValue = 'Main';
});
app.controller('ChildCtrl', function($scope) {
this.childValue = 'Child';
// I want to access the property of the parent controller here
});
How can the ChildCtrl set the name property of the MainCtrl? Here the Plunkr.
Using the $scope notation, I could have accessed $scope.parentValue from the child controller. How can the same functionality be achieved using the Controller As notation?
Since your using the "controller as" notation, witin your ChildCtrl you can access the MainCtrl using $scope.main, for example $scope.main.name.
See my snippet below.
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
this.name = 'Main';
this.test = {};
});
app.controller('ChildCtrl', function($scope) {
this.name = 'Child';
alert($scope.main.name);
});
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl as main">
<div ng-controller="ChildCtrl as child">
{{ main.name }} + {{ child.name }}
</div>
</body>
</html>
You should not mix up "controller as" and $scope usage. To update data in a parent-scope you could/should use services.
Example: Changing the page-title from within any Child-Controller:
app.service("SiteService", function () {
return {
title: "Page title";
}
}
app.controller ("ParentCtrl", function (SiteService) {
this.site = SiteService;
}
app.controller ("ChildCtrl", function (SiteService) {
SiteService.title = "New Title";
}
And your template
<html ng-app="someApp" ng-controller="ParentCtrl as site">
<head>
<title>{{site.title}}</title>
</head>
</html>
The main advantage of this approach: You separate public mutable from private properties.
Putting the data in $scope is the angular way to do this. You could also set/get your data from a service which is then easy to include into either controller.
Check out this video: https://egghead.io/lessons/angularjs-sharing-data-between-controllers