How do I update my html on Click in Angularjs Controllers

Question

I have the html Structure that I need to update from the json data. My Json data is in a Controller. I need to write an expression for ng-click event that will read the json data and put the in the corresponding div in html. but I am not sure how to acheive this.

Below is what I have so far.

<body data-ng-app>
    <div class="container" data-ng-controller="UpdateDataCtrl">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>
    <a href="javascript:void(0)" ng-click="not sure how to get json here">UPdate Controllers</a>
</body>


function UpdateDataCtrl($scope) {
        $scope.data = [
            {
                "USA":"Eglish",
                "Pop":"232423432432"
            },
            {
                "France":"French",
                "Pop":"1212323432"
            },
            {
                "Spain":"Spainish",
                "Pop":"3432432"
            }
        ]
    }

On each click the 2 Div should get updated from the json. First div should have USA---English Pop---2342234232 and then on next click the div should have data from France and so on.

http://jsfiddle.net/MBFpD/1/

Thanks

Juliane Holzt · Accepted Answer · 2013-09-26 19:42:34Z

2

It appears that you are unclear on the concept of AngularjS. You don't want to update the DIVs. You want to reference your model and then change the data in your model.

For example you can write the div like this:

<div class="inner1">Population: {{data[dataindex].Pop}}</div>

Then in the Controller you initialize the dataindex to 0, so that this will output the population from the first entry in the array:

$scope.dataindex = 0;

The click function (you must have the link with the ng:click inside the block governed by the Controller!) could then just increase the dataindex by one and by using modulo restart at 0 again when the end of the array was reached.

$scope.click = function() {
  $scope.dataindex = ($scope.dataindex+1) % $scope.data.length;

Here is an updated and modified jsfiddle of your example which will show everything in action: http://jsfiddle.net/MBFpD/2/

answered Sep 26, 2013 at 19:42

Juliane Holzt

2,14515 silver badges14 bronze badges

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

9 Comments

Mike Over a year ago

thanks thats useful. what is dataindex. Is this a keyword in angularjs?

Juliane Holzt Over a year ago

No, it is just another variable which is used as the array index and then incremented on click.

Mike Over a year ago

thanks, I owe a treat to you... is this how you define vars in angular $scope.dataindex = 0;

Mike Pugh Over a year ago

@Mike - I highly recommend you take an hour or two and go through the AngularJS getting started tutorial @ docs.angularjs.org/tutorial. It's interactive and will answer a lot of your questions.

Juliane Holzt Over a year ago

The angularjs tutorial videos at egghead.io are a good resource as well.

|

roland · Accepted Answer · 2013-09-26 19:47:26Z

0

Bind your data to your scope when you click on the link:

$scope.update = function() {
  $scope.data = data; //your array defined locally to the scope
};

ng-repeat your data bound to the scope; display the container if the size of the array is > 0.

Use {{index}} to get the iteration variable inside the loop.

Above all, move your ng-controller declarative at the top to enclose both your ng-repeat and your ng-click; otherwise, AngularJS cannot guess what you want to achieve.

http://jsfiddle.net/MBFpD/5/

answered Sep 26, 2013 at 19:47

roland

7,7956 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

How do I update my html on Click in Angularjs Controllers

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related