使用 angularjs 在每次点击时更改 css 属性答案

【问题标题】：change css property on every click with angularjs使用 angularjs 在每次点击时更改 css 属性
【发布时间】：2014-08-07 17:50:03
【问题描述】：

检查此Link，每次用户单击按钮时，我都会尝试更改边距。我能够更改背景属性，不知道 Margin 属性出了什么问题。

这是我想要实现的目标：

应在每次单击时修改边距，而不仅仅是一次。所以第一次点击如果我的左边距是 20px，第二次点击它会是 40px，依此类推。
达到特定边距（即 200 像素）后，按钮应消失/禁用。

我知道这是可以做到的，但是因为我是 Angular 新手，所以无法弄清楚？

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;
 }

【问题讨论】：

能够根据@Pierre 的以下回答更改边距属性。任何有关上述第 1 点和第 2 点的帮助将不胜感激。
plnkr.co/edit/JtPu8HV43sfZqUmp3Pza?p=preview
我完成了答案。

标签： javascript html css angularjs

【解决方案1】：

您好，请看这里：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()"  />

【讨论】：

After reaching to a specific margin(i.e. 200px) button should be disappear/disable. 呢？

【解决方案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'};
};

在你的 ng-style 标签中使用 styleButton / styleMargin

【讨论】：

感谢它的工作，但它不是完整的答案。我也想实现提到的第 1 点和第 2 点。
能否请您更新 plnkr 链接，我按照您的建议但无法实现。