When click button value not update in angular js

Question

This html code :

<md-button class="md-primary " ng-click="setDevice('phone')">Phone           
        </md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">
           Tablet
        </md-button>

<div class="area-{{setDevice}}">
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>

First Time When Click Phone or Tablet Button Update setDevice Value

$scope.setDevice = "";
$scope.setDevice = function(setDevice){
            $scope.setDevice = setDevice;
        }

The problem is (First Click phone), When Click Tablet Button Not update setDevice Value

When click both button, hope to update $scope.setDevice Value

AdityaParab · Accepted Answer · 2015-09-07 12:26:55Z

4

Although, your line of thinking is correct, you've messed it up a little bit in syntax. :) Which is okay and an essential step in learning.

In your code, you have declared your setDevice, first, as a string and then as a function. Becuase the last assignment is a function, your $scope.setDevice is no longer a string, but a function.

Change the name of the variable to something else and it will work fine.

$scope.currentDevice = "";
$scope.setDevice = function(setDevice){
    $scope.currentDevice = setDevice;
}

And in your HTML

<md-button class="md-primary " ng-click="setDevice('phone')">Phone</md-button>
<md-button class="md-primary " ng-click="setDevice('tablet')">Tablet</md-button>

<div class="area-{{currentDevice}}"> <!-- THIS NEEDS TO BE UPDATED AS WELL -->
    <me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>

answered Sep 7, 2015 at 12:26

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

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

4 Comments

skubski Over a year ago

New post when I was about to answer pretty much the same. +1

Amila Sampath Over a year ago

Update "currentDevice" Value But not refresh div tag. What can I do that?

AdityaParab Over a year ago

What do you mean But not refresh div tag? Angular has 2 way data binding. You don't need to update/refresh tags (DOM) :)

Amila Sampath Over a year ago

Your are correct. I double checked my code, There was syntax error. I fixed that. It's now working. Thanks you for reminded me this idea about angular js.

Bhojendra Rauniyar · Accepted Answer · 2015-09-07 12:21:42Z

0

Use your code just like this:

$scope.setDevice = function(setDevice){
   return setDevice;
}

answered Sep 7, 2015 at 12:21

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

When click button value not update in angular js

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related