Geek Answers Handbook

Change css property on every click using angularjs

Check Link , I try to change the margin every time the user clicks the Button. I can change the background property, I don’t know what will go wrong with the Margin property.

Here is what I am trying to achieve:

  • Fields must be changed for every click more than once. Therefore, the first click, if my left margin is 20 pixels, in the second click there will be 40 pixels, etc.
  • After reaching a certain limit (i.e. 200px), the button should disappear / be disabled.

I know this can be done, but since I am new to angular unable to understand?

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;
 }
+4
source share
2 answers

, , : http://plnkr.co/edit/vNpUQh0TV8qGCifpJofa?p=preview .

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()"  />
+2

1:

:

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


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

CSS , .

2:

ng-click

ng-click="clickFunction()"


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

styleButton/styleMargin ng-

+1

More articles:


All Articles