如何更改选定的元素类名称

时间：2016-02-05 09:59:53

标签： javascript angularjs

我想更改所选按钮的名称和他们的类，名称正在改变，但我有点混淆改变按钮类，在下面的代码如果我改变类名所有按钮类正在改变，我怎么能只更改选定的按钮类？请编辑我的下面的代码，并建议我如何解决这个问题.. DEMO 

// Code goes here

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.class = 'col-sm-12';
  $scope.textVal = 'click a button';
  $scope.selectedEvent = {};
  $scope.setText = function(element) {
    $scope.selectedEvent = element;
     $scope.textVal = element.currentTarget.innerHTML;
  };
  $scope.changeButtonText = function(){
    $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
  };
    $scope.changetoLarge = function(){
    $scope.class = 'col-sm-12'
  }
  $scope.changetoMedium = function(){
    $scope.class = 'col-sm-6'
  }
  $scope.changetoSmall = function(){
    $scope.class = 'col-sm-4'
  }
});
   
<!DOCTYPE html>
<html ng-app='myapp'>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello Plunker!</h1>
<div>
  <button type="button" ng-class="class" class="btn btn-primary" ng-click="setText($event)">one</button>
  <button type="button" ng-class="class" class="btn btn-primary" ng-click="setText($event)">two</button>
  <button type="button" ng-class="class" class="btn btn-primary" ng-click="setText($event)">three</button>
</div><br>
<div>
<input type="text" ng-model="textVal" ng-change="changeButtonText()">//change button name here//<br>

<input ng-click="changetoLarge()" type="radio" name="button">Large
<input ng-click="changetoMedium()" type="radio" name="button">medium
<input ng-click="changetoSmall()" type="radio" name="button">Small 
</div>//change button class here//
</body>

</html>

7 个答案:

答案 0 :(得分：1)

在Controller上进行与DOM相关的操作并不是一种好习惯。创建一个指令，然后执行操作。 编辑：尝试以下代码

＆＃13;
＆＃13; 
// Code goes here

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.class = 'col-sm-12';
  $scope.textVal = 'click a button';
  $scope.selectedEvent = {};
  $scope.selectedButton = '';
  $scope.setText = function(element) {
    $scope.selectedEvent = element;
     $scope.textVal = element.currentTarget.innerHTML;
     $scope.selectedButton = element.toElement.id;
  };
  $scope.changeButtonText = function(){
    $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
    
  }; 
});

app.directive('addClassName', function() {
  return {
        restrict: 'A',
        replace: false,
        link: function (scope,elm, attr) {
          elm.click(function( e, rowid ) {
             var btn = angular.element('#'+attr.btnselected);
             var inpt = angular.element('textVal');
             console.log(btn);
             //if (inpt.val() != '') {
                if (attr.txt == 'Large') {
                  btn.attr('class','');
                  btn.addClass('btn btn-primary col-sm-12');
                } else if (attr.txt == 'Medium') {
                  btn.attr('class','');
                  btn.addClass('btn btn-primary col-sm-6');
                } else {
                  btn.attr('class','');
                  btn.addClass('btn btn-primary col-sm-4');
                } 
             //}
             
          });
        }
     } 
});
＆＃13; 
/* Styles go here */

.col-sm-12 {
    color: #fff;
    background-color: #337ab7 !important;
    border-color: #2e6da4 !important;
}

.col-sm-6 {
   color: #fff;
   background-color: #f89406 !important;
   border-color: #f89406 !important;

}
.col-sm-4 {
   color: #fff;
   background-color: #000 !important;
   border-color: #000 !important;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myapp'>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello Plunker!</h1>
<div>
  <button type="button" id= 'one' class="btn btn-primary {{class}}" ng-click="setText($event)">one</button>
  <button type="button" id= 'two' class="btn btn-primary {{class}}" ng-click="setText($event)">two</button>
  <button type="button" id= 'three' class="btn btn-primary {{class}}" ng-click="setText($event)">three</button>
</div><br>
<div>
<input type="text" id = 'textVal' ng-model="textVal" ng-change="changeButtonText()">//change button name here//<br>

<input type="radio" name="button" txt="Large" btnSelected= '{{selectedButton}}' add-class-name>Large
<input  type="radio" name="button" txt="Medium" add-class-name btnSelected= '{{selectedButton}}'>medium
<input  type="radio" name="button" txt="Small" add-class-name btnSelected= '{{selectedButton}}'>Small 
</div>//change button class here//
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

检查此plnkr https://plnkr.co/edit/spYR8kcndwZ2yfqXQ9iW?p=preview

答案 1 :(得分：1)

ngClass需要一个表达式或{'className'：expression}对象。

修改

由于你想单独更新它们，我做了一个新的DEMO

旧代码

你可以做这样的事情

JS：

<button type="button" ng-class="getClass()" class="btn btn-primary" ng-click="setText($event)">two</button>

HTML：

viewDidLoad

答案 2 :(得分：1)

第一点：请记住class是javascript中的保留字（即不要将其用于变量）。人们经常使用klass作为变量名称。

关于您的问题，有很多方法可以做到这一点。我最喜欢的是带有隔离范围的按钮指令，但我会尽量保持这个答案的简单。

我认为以下代码可以满足您的需求。

<body ng-controller="MainCtrl">
  <h1>Hello Plunker!</h1>
  <div>
    <button type="button" class="btn btn-primary" ng-click="setText($event)">one</button>
    <button type="button" class="btn btn-primary" ng-click="setText($event)">two</button>
    <button type="button" class="btn btn-primary" ng-click="setText($event)">three</button>
  </div>
  <br>
  <div>
    <input type="text" ng-model="textVal" ng-change="changeButtonText()">//change button name here//
    <br>

    <input ng-click="changetoLarge()" type="radio" name="button">Large
    <input ng-click="changetoMedium()" type="radio" name="button">medium
    <input ng-click="changetoSmall()" type="radio" name="button">Small
  </div>//change button class here//
</body>

... 

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.textVal = 'click a button';
  $scope.selectedButton = null;

  $scope.setText = function(event) {
    $scope.selectedButton = event.target;
    $scope.textVal = $scope.selectedButton.innerHTML;
  };
  $scope.changeButtonText = function(){
    $scope.selectedButton.innerHTML = $scope.textVal;
  };
  $scope.changetoLarge = function(){
    $scope.selectedButton.className = 'btn btn-primary col-sm-12'
  }
  $scope.changetoMedium = function(){
    $scope.selectedButton.className = 'btn btn-primary col-sm-6'
  }
  $scope.changetoSmall = function(){
    $scope.selectedButton.className = 'btn btn-primary col-sm-4'
  }
});

我不喜欢你介绍你的dom元素的方式，所以我改变了。除此之外，主要的变化是直接在selectedButton上设置类，而不在html中使用Angular插值。简单，并为您提供您想要的结果。

答案 3 :(得分：1)

将您的功能更改为以下.. 

$scope.changetoLarge = function(){
       angular.element($scope.selectedEvent.currentTarget).removeClass($scope.selectedE vent.currentTarget.className)

      angular.element($scope.selectedEvent.currentTarget).addClass('btn btn-primary col-sm-12')
 }
  $scope.changetoMedium = function(){
       angular.element($scope.selectedEvent.currentTarget).removeClass($scope.selectedEvent.currentTarget.className)
       angular.element($scope.selectedEvent.currentTarget).addClass('btn btn-primary col-sm-6')
   }
   $scope.changetoSmall = function(){
     angular.element($scope.selectedEvent.currentTarget).removeClass($scope.selectedEvent.currentTarget.className)
     angular.element($scope.selectedEvent.currentTarget).addClass('btn btn-primary col-sm-3')
 }

答案 4 :(得分：1)

Below is the script code... update this from previous answer.

app.controller('MainCtrl', function($scope) {
$scope.class = '';
 $scope.textVal = 'click a button';

  $scope.selectedEvent = {};

  $scope.setText = function(element) {
    $scope.selectedEvent = element;
    $scope.textVal = element.currentTarget.innerHTML;
    var currentbtnClass = element.currentTarget.classList;
    alert(currentbtnClass[2])

    $scope.CSSClass = currentbtnClass[2]
    alert($scope.CSSClass)
  };
  $scope.changeButtonText = function(){
    $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
  };

  $scope.setCSSClass=function(value){   
    angular.element($scope.selectedEvent.currentTarget).removeClass($scope.selectedEvent.currentTarget.className)

    angular.element($scope.selectedEvent.currentTarget).addClass('btn btn-primary '+value)
  }
});



 Below is the HTML which you need to update..

  <button type="button" id="btn1" ng-model="btn1"  class="btn btn-primary" ng-click="setText($event)">one</button>
  <button type="button" id="btn2" ng-model="btn2"  class="btn btn-primary" ng-click="setText($event)">two</button>
  <button type="button" id="btn3" ng-model="btn3" class="btn btn-primary" ng-click="setText($event)">three</button>
</div><br>
<div>

<input type="text" ng-model="textVal" ng-change="changeButtonText()">//change button name here//<br><br><br>

<input type="radio" ng-model="value1" name="rdbtn[]" value="col-sm-12" ng-click='setCSSClass(value1)' ng-checked="CSSClass==value1" >
<input type="radio" ng-model="value2" name="rdbtn[]" value="col-sm-6" ng-click='setCSSClass(value2)' ng-checked="CSSClass==value2">
<input type="radio" ng-model="value3" name="rdbtn[]" value="col-sm-3" ng-click='setCSSClass(value3)' ng-checked="CSSClass==value3"> 

</div>//change button class here//

Let me know if this helps you ?

答案 5 :(得分：0)

您需要使用ID来唯一标识按钮

答案 6 :(得分：0)

我确实在代码中改变了很多重构，因为我不喜欢你玩DOM element.currentTarget.innerHTML的方式。通过将重构代码转换为数组并使用ng-repeat呈现相同内容，重构将减少重复代码。

同样通过拥有buttons数组，它将包含每个按钮信息。数组的每个元素都代表一个按钮＆amp;你可以在按钮元素中获得任何特殊信息。

<强>标记 

<div>
  <button ng-class="button.class" class="btn btn-primary" ng-click="$parent.selected = $index" 
      ng-repeat="button in buttons">
        {{button.text}}
  </button>

  </div>
  <br>
  <div>
    <input type="text" ng-model="buttons[selected || 0].text" value="click a button">
    <br>

    <input ng-click="changetoLarge()" type="radio" name="button">Large
    <input ng-click="changetoMedium()" type="radio" name="button">medium
    <input ng-click="changetoSmall()" type="radio" name="button">Small
</div>

<强>代码 

$scope.changetoLarge = function() {
    $scope.buttons[$scope.selected].class = 'col-sm-12'
}
$scope.changetoMedium = function() {
    $scope.buttons[$scope.selected].class = 'col-sm-6'
}
$scope.changetoSmall = function() {
    $scope.buttons[$scope.selected].class = 'col-sm-4'
}
$scope.buttons = [{
    text: 'Feed',
    id: '1',
    class: "col-sm-12"
  }, {
    text: 'the',
    id: '2',
    class: "col-sm-12"
  }, {
    text: 'Input',
    id: '3',
    class: "col-sm-12"
}];

Demo Plunkr

相关问题
最新问题