Question

选中此Link，我每次用户点击按钮时都会尝试更改保证金。我能够改变背景属性，不知道Margin属性出了什么问题。

这是我想要实现的目标：

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

我知道可以做到这一点，但是因为我不熟悉角度的新手？

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

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

Answer 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风格标签中使用styleButton / styleMargin

使用angularjs在每次单击时更改css属性

2 个答案: