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
      }
   ]
}

Sajeetharan · Accepted Answer · 2017-01-02 14:35:28Z

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="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
  <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

  <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" 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>

Dan · Accepted Answer · 2017-01-02 14:43:06Z

0

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.

edited Jan 2, 2017 at 14:43

answered Jan 2, 2017 at 14:36

Dan

10.6k2 gold badges40 silver badges68 bronze badges

2 Comments

georgeawg Over a year ago

Why not just do var alert = $scope.menu.content?

Dan Over a year ago

There's the possibility that OP actually passes the value from the HTML (which he should do, IMO). In that case, you can't do that. I just translated his question literally, and then addressed the "but you COULD do this" afterwards.

Collectives™ on Stack Overflow

get value of angular js expression in window.alert in angularJs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related