CODEWITHSUNDEEP
javascripthtmlcssangularjs
ankitd
ankitd

Reputation: 2027

change css property on every click with angularjs

Check this Link, I am trying to change Margin each time a user click on Button. I am able to change background property, don't know what going wrong with Margin property.

Here is what I am trying to achieve:

  1. The margin should be modified on each click not just once. So in first click if my left margin is 20px, in second click it will be 40px and so on.
  2. After reaching to a specific margin(i.e. 200px) button should be disappear/disable.

I know this can be done,but as I am new to angular not able to figure out?

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
</head>

<body>
  <div ng-app>
  <p ng-style="myStyle">:( Margin will play with me</p>
  <input type="button" value="Margin Change(Not Working)" ng-click="myStyle={margin-left:'20px'}" />
  <span><bold>Please note margin should be changed on each click</bold></span>
  <input type="button" value="BG Change Working" ng-click="myStyle={background:'red'}" />
    <ul>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
    <li> <a href="#">Home</a>

    </li>
    <li> <a href="#">About</a>

    </li>
    <li> <a href="#">Contact</a>

    </li>
</ul>

CSS

 .changeColor {
 color:blue;
 }
 .changeSize {
 font-size:30px;
 }
 .italic {
 font-style:italic;
 }
 ul {
 list-style:none;
 margin:0;
 padding:0;
 }
 li {
 float:left;
 }
 li + li {
 border-left:1px solid #ccc;
 }
 a {
 display:block;
 padding:7px 10px;
 color:#222;
 background:#eee;
 text-decoration:none;
 }
 a:hover {
 color:#fff;
 background:#666;
 }
 a:active {
 color:#fff;
 background:#0090cf;
 }

Upvotes: 4

Views: 5561

Answers (2)

sylwester
sylwester

Reputation: 16508

Hi please see here:http://plnkr.co/edit/vNpUQh0TV8qGCifpJofa?p=preview You need to move logic functions into controller.

JS:

app.controller('MainCtrl', function($scope) {
  $scope.margin = 0;
  $scope.showbutton = true;
  $scope.addMargin = function() {


    $scope.margin += 20;
    if ($scope.margin < 200) {
      $scope.myStyle = {
        'margin-left': $scope.margin + 'px'

      }
    } else {
      $scope.showbutton = false;


    }
  }
});

HTML

 <input type="button" value="Margin Change(Not Working)" ng-click="addMargin()"  />

Upvotes: 2

Pierre
Pierre

Reputation: 578

Point 1:

You need to change:

ng-click="myStyle={margin-left:'20px'}"

to

ng-click="myStyle={'margin-left':'20px'}"

Since some CSS style names are not valid keys for an object, they must be quoted.

Point 2:

You can link a function to ng-click

ng-click="clickFunction()"

like

var addMargin = 0;
$scope.clickFunction= function(){
  if(addMargin == 200){
    $scope.styleButton = {display:'none'};
  }
  addMargin = addMargin +20;
  $scope.styleMargin = {'margin-left': addMargin+'px'};
};

And use styleButton / styleMargin in your ng-style tags

Upvotes: 1

Related Questions