get value of angular js expression in window.alert in angularJs
Question
Hi I am trying to alert the value of an expression in angularJs
I am quite new to angular and am just trying to work out how grab the value of the expression in an alert or in the console.
I am using AngularJs with json, below is my code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<ul>
<li ng-repeat="menu in menus" id="{{menu.id}}" class="{{menu.cssClass}}">
<a ng-href="{{menu.content}}" ng-click="doGreeting(greeting)">{{menu.description}}</a>
<ul>
<li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
<a ng-href="{{submenu.content}}" ng-click="ShowAlert()">{{submenu.description}}</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
JAVASCRIPT
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope", "$http", "$window",
function($scope, $http, $window) {
$http.get('menu.json')
.then(function(response) {
$scope.menus = response.data.menus; // response data
$scope.greeting = 'Hello, World!';
$scope.ShowAlert = function () {
$window.alert("{{menu.content}}");
}
});
}
]);
JSON
{
"menus":[
{
"id":"contact",
"leaf":true,
"description":"Contact Us",
"link":"",
"content":"contactUs.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"rules",
"leaf":false,
"description":"Sports Betting Rules",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"types",
"leaf":true,
"description":"Wager Types",
"link":"",
"content":"wagerTypes.html",
"cssClass":"static-content wager-types",
"menu":null
},
{
"id":"odds",
"leaf":true,
"description":"Odds & Lines",
"link":"",
"content":"oddsAndLines.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"policies",
"leaf":true,
"description":"Rules & Policies",
"link":"",
"content":"rulesAndPolicies.html",
"cssClass":"static-content rules-policies",
"menu":null
},
{
"id":"bonuses",
"leaf":true,
"description":"Sports Bonuses",
"link":"",
"content":"sportsBonuses.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"conditions",
"leaf":false,
"description":"Terms & Conditions",
"link":"",
"content":"",
"cssClass":"",
"menu":[
{
"id":"termsOfService",
"leaf":true,
"description":"Terms of Service",
"link":"",
"content":"termsOfService.html",
"cssClass":"static-content",
"menu":null
},
{
"id":"privacy",
"leaf":true,
"description":"Privacy Policy",
"link":"",
"content":"privacy.html",
"cssClass":"static-content",
"menu":null
}
]
},
{
"id":"view",
"leaf":true,
"description":"View in: Mobile | Full Site",
"link":"",
"content":"view.html",
"cssClass":"static-content",
"menu":null
}
]
}
2 answers
solution1
1 2017-01-02 14:36:54
Concerning $window.alert("{{menu.content}}"); , Angular does not auto-magically evaluate expressions in all of JavaScript - it'll only evaluate expressions passed to it in templates. These get passed to something like $compile , which actually compiles the expression.
You can do something like this using $scope.$eval (which is not as evil as it sounds). That might look something like this:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope", "$http", "$window",
function($scope, $http, $window) {
$http.get('menu.json')
.then(function(response) {
$scope.menus = response.data.menus; // response data
$scope.greeting = 'Hello, World!';
$scope.ShowAlert = function () {
var alert = $scope.$eval('menu.content')
$window.alert(alert);
}
});
}
]);
Alternatively, you could evaluate the expression inside of the HTML (which is what I would suggest, and what @Sajeetharan posted above, so I won't replicate it here).
Note that Angular 1.5+ discourages the use of controllers in this manner because they do not exist in this form in Angular 2.0. I'd highly recommend porting this code to use components instead. You'd have a few components; one for the ListCtrl , one for each menu, and one for each submenu.
solution2
0 ACCPTED 2017-01-02 14:35:28
Pass the model variable to the function and then print it,
<li ng-repeat="submenu in menu.menu" id="{{submenu.id}}" class="{{submenu.cssClass}}">
<a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a>
</li>
Controller.js
$scope.ShowAlert = function (val) {
$window.alert(val);
}
Demo
var app = angular.module("app", []); app.controller("ListCtrl", ["$scope", function($scope) { $scope.ShowAlert = function (val) { alert(val.content); } $scope.menus = [{ "id": "contact", "leaf": true, "description": "Contact Us", "link": "", "content": "contactUs.html", "cssClass": "static-content", "menu": null }, { "id": "rules", "leaf": false, "description": "Sports Betting Rules", "link": "", "content": "", "cssClass": "", "menu": [{ "id": "types", "leaf": true, "description": "Wager Types", "link": "", "content": "wagerTypes.html", "cssClass": "static-content wager-types", "menu": null }, { "id": "odds", "leaf": true, "description": "Odds & Lines", "link": "", "content": "oddsAndLines.html", "cssClass": "static-content", "menu": null }, { "id": "policies", "leaf": true, "description": "Rules & Policies", "link": "", "content": "rulesAndPolicies.html", "cssClass": "static-content rules-policies", "menu": null }, { "id": "bonuses", "leaf": true, "description": "Sports Bonuses", "link": "", "content": "sportsBonuses.html", "cssClass": "static-content", "menu": null }] }, { "id": "conditions", "leaf": false, "description": "Terms & Conditions", "link": "", "content": "", "cssClass": "", "menu": [{ "id": "termsOfService", "leaf": true, "description": "Terms of Service", "link": "", "content": "termsOfService.html", "cssClass": "static-content", "menu": null }, { "id": "privacy", "leaf": true, "description": "Privacy Policy", "link": "", "content": "privacy.html", "cssClass": "static-content", "menu": null }] }, { "id": "view", "leaf": true, "description": "View in: Mobile | Full Site", "link": "", "content": "view.html", "cssClass": "static-content", "menu": null }] ; // response data } ]);
<!DOCTYPE html> <html> <head> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" /> <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <script data-require="jquery@1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-app='app'> <div ng-controller="ListCtrl"> <ul> <li ng-repeat="menu in menus" id="{{artist.id}}"> <a ng-href="{{menu.content}}">{{menu.description}}</a> <ul> <li ng-repeat="submenu in menu.menu"> <a ng-href="{{submenu.content}}" ng-click="ShowAlert(submenu)">{{submenu.description}}</a> </ul> </li> </ul> </div> </body> </html>
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.
Related Question
$window.alert not working inside angular function
How to get the id of a window.alert()?
What is the difference between AngularJS $window.alert() and Javascript alert()?
window.alert() Not Working
Need to use window.alert() method to get notify, that form field is empty, in Angular
angularJS: window.alert only after method is done
angularjs window.alert() while using mouseEvents causes error
Unable to exit the function after 'window.alert' in Angular9
JavaScript window.alert not working
Function window.alert is not supported
Related Tags