Angular scope variable not getting set

Question

I am a learner in angular JS. I am trying out the $http and set the corresponding value to the scope variable. But It doesnt work. Below is the snippet of the html.

<div ng-app="fileapp" ng-controller="myctl" ng-init="hidevar=true">
    <div ng-hide="hidevar" class="ng-hide">
        <table>
        <tbody ng:repeat="x in dataobj">
        <tr><td>{{x.url}}</td></tr>
        </tbody>
        </table>
    </div></div>

below is the success call back script with angular js

success(function(data) {
                                            console.log(data);
                                            var d=angular.fromJson(data);
                                            console.log('d is:'+d.url);
                                            $window.alert(d.url);
                                            $scope.dataobj=data;
                                            //$scope.url=data.url;
                                            $scope.hidevar =false;

I am getting the expected url string value in console.log and also in the window.alert. But the same is not getting refelected in $scope.dataobj=data; and $scope.hidevar =false;

The ng hidden is not setting to false and also the json data from the service is not getting set to dataobj. Below is the console output.

I changed the list div like the below but still no luck

<div ng-hide="hidevar" class="ng-hide">
        <table>
        <tbody>
        <tr><td>{{dataobj.url}}</td></tr>
        </tbody>
        </table>
    </div>

I added a hidden section and updated the hidden variable inside the scope but that is not reflecting.

  <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <!--<script src="app.js"></script> -->
</head>

<body ng-app="plnkrApp" ng-controller="DemoController" ng-init="myvar=true">
  <h1>Array</h1>
  <table>
    <tbody ng:repeat="x in array">
      <tr>
        <td>{{x.url}}</td>
      </tr>
    </tbody>
  </table>
  <h1>Object</h1>
  <table>
    <tbody ng:repeat="x in object">
      <tr>
        <td>{{x}}</td>
      </tr>
    </tbody>
  </table>
  <div ng-hide="myvar">
    <p>Hidden Section</p>
  </div>
  <script>

    var app = angular.module('plnkrApp', []);

app
  .controller("DemoController", function($scope) {
    $scope.array = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];
    $scope.object = {url: 'test1'};
    $scope.myvar=false;
  });
  </script>
</body>

</html>

The hidden section is not getting displayed. Why the data is not binding to hidden variable?

austinthedeveloper · Accepted Answer · 2016-07-25 21:50:27Z

0

You're getting an object back, not multiple objects in an array.

Doing ng-repeat on this object would just need {{x}} instead of {{x.url}} but that's not right.

Create a test scope variable with an array of 2 or more of those objects. You'll see that it'll work the way you want.

$scope.test = [ {url: 'test1'}, {url: 'test2'}, {url: 'test3'}];

Edit: Here is a Plunkr showing the difference:

http://embed.plnkr.co/6wSuAPHPCSZF60Pph85V/

edited Jul 25, 2016 at 21:50

answered Jul 25, 2016 at 21:44

austinthedeveloper

2,63923 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GAK Over a year ago

Hi Please see my edit. It is not working even if replace the list. with table.

austinthedeveloper Over a year ago

You hard-coded ng-hide into your class: class="ng-hide". It will never show up.

GAK Over a year ago

I updated your demo code. Please look at the edit section.

Collectives™ on Stack Overflow

Angular scope variable not getting set

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related