Angularjs 角度-单击时更改div的颜色和文本

我试图在单击

ng click

时更改div的颜色。我可以通过更改颜色使其工作，但现在我需要在单击div时更改其文本，因此根据示例，我需要更改颜色并替换其中的文本

HTML:

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}}
    </div>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

.odd{
    background-color:white;  
}
.even{  
     background-color:grey;
}
.yellow{
     background-color:yellow;
}

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

function MyCtrl($scope) {
        $scope.row = -1;
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        <span ng-show="$index != row ">{{item.id}}
        {{item.name}}</span>
        <span ng-show="$index == row"> : Cliked</span>
    </div>
</div>

CSS:

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}}
    </div>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

.odd{
    background-color:white;  
}
.even{  
     background-color:grey;
}
.yellow{
     background-color:yellow;
}

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

function MyCtrl($scope) {
        $scope.row = -1;
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        <span ng-show="$index != row ">{{item.id}}
        {{item.name}}</span>
        <span ng-show="$index == row"> : Cliked</span>
    </div>
</div>

jsiddle:

您可以检查这个

修改CSS类

.yellow{
     background-color:yellow;
     color:green;
}

及

HTML到

<div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}} <span ng-show="$index == row"> : Cliked</span>
    </div>

{{item.id}
{{item.name}}：已剪辑

是@user3249448的ans的一个变体。它可能就是您正在寻找的

看

JS:

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}}
    </div>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

.odd{
    background-color:white;  
}
.even{  
     background-color:grey;
}
.yellow{
     background-color:yellow;
}

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

function MyCtrl($scope) {
        $scope.row = -1;
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        <span ng-show="$index != row ">{{item.id}}
        {{item.name}}</span>
        <span ng-show="$index == row"> : Cliked</span>
    </div>
</div>

HTML:

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}}
    </div>
</div>

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

.odd{
    background-color:white;  
}
.even{  
     background-color:grey;
}
.yellow{
     background-color:yellow;
}

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

function MyCtrl($scope) {
        $scope.row = -1;
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

<div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        <span ng-show="$index != row ">{{item.id}}
        {{item.name}}</span>
        <span ng-show="$index == row"> : Cliked</span>
    </div>
</div>

你好，{{name}}！
{{item.id}
{{item.name}
：陈词滥调

我冒昧地改用指令重写了整个内容，因为我相信您的用例需要它：）

---

请注意： 下面的内容看起来很复杂，但实际上非常简单。只要在Angular模块中删除指令的JS代码，就可以开始了。
您甚至不需要阅读它（尽管它不会伤害您）或替换任何东西，它已经可以随时使用——并且可以在许多类似的情况下重复使用

---

我创建了两个协同工作的指令：

基本元素：

clickable元素

，它将了解其

单击的

状态

还有一个容器：

clickablecontainer

，它将是一个围绕“clickable”元素集合的包装器

可点击的容器

可点击容器

将管理其所有子元素的状态

可点击元素

。单击其中一个按钮可打开该按钮，并关闭所有其他按钮

可点击元素

对于您的简单用例，

可点击元素

s只有两个简单的特性：

它们在其作用域中注入一个

布尔值
$clicked

根据单击的状态，他们添加/删除了一个

单击的

类

例子 您的代码现在看起来就像这样：

<clickable-container>
  <clickable-element ng-repeat="elem in ['A', 'B', 'C', 'D', 'E']">
    <div ng-if="$clicked">clicked!</div>
    <div ng-if="!$clicked">{{elem}}</div>
  </clickable-element>
</clickable-container>

可点击元素{
光标：指针；
}
[可点击容器][可点击元素]：类型的第n个（偶数）{
背景色：#eee；
}
.点击{
背景色：黄色！重要；
}

点击！
{{elem}}

您需要将文本更改为单击？谢谢您的回答，但我需要删除旧文本并包含新文本，因此根据示例：每次单击删除1A等，明白吗？谢谢。好的，您想用旧文本替换什么文本？意思是“1A”到“Removed 1A”remove 1A and insert:clicked，就像从.js中删除文本并单击insert一样，但在另一个分区中单击后将文本放回谢谢，但我如何将您的示例应用于此：，做同样的操作，但在电子邮件字段中？那么，当我点击电子邮件时，会变成黄色，并将文本改为点击？你能帮助我吗？非常感谢。