current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite

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;
 }
share|improve this question
    
able to change margin property as per below answer by @Pierre. any help regarding mentioned point 1 & 2 will be appreciated. –  ankitdadhich Aug 7 '14 at 9:32
    
plnkr.co/edit/JtPu8HV43sfZqUmp3Pza?p=preview –  dfsq Aug 7 '14 at 9:47
    
I completed the answer. –  Pierre Aug 7 '14 at 9:47

2 Answers 2

up vote 2 down vote accepted

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()"  />
share|improve this answer
    
What about After reaching to a specific margin(i.e. 200px) button should be disappear/disable.? –  dfsq Aug 7 '14 at 9:45
    
@dfsq I've updated plunkr –  sylwester Aug 7 '14 at 9:48
up vote 1 down vote

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

share|improve this answer
    
thanks it worked, but it's not complete answer. I want to achieve mentioned point 1 & 2 as well. –  ankitdadhich Aug 7 '14 at 9:28
    
@ankit Thanks for pointing that out, I completed it. –  Pierre Aug 7 '14 at 9:38
    
can you please update plnkr link, am following ur suggestion but not able to achieve. –  ankitdadhich Aug 7 '14 at 9:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.