Angularjs - 如何通过ng-click将其指向所有的ng-repeat中的一个？

15 浏览
0 Comments

Angularjs - 如何通过ng-click将其指向所有的ng-repeat中的一个？

我该如何在ng-click函数中引用其他ng-repeat元素？

我想要通过点击其中一个元素来修改其他ng-repeat元素的{{nameClass}}。

HTML:

  •

    Javascript:

    function somefunction(){
     this.nameclass = "some";
     //如何设置其他元素的类名???
}

    0

    3 答案

    0 Comments

    问题的原因是使用this.nameclass设置了当前项作用域的nameclass属性，而不是所有项都属于的父作用域。当将其设置为$scope对象时，所有的LI项都继承nameclass，而不仅仅是点击的那个。

    解决方法是使用$scope.nameclass来设置相同的类值给所有的项。这样，无论点击哪个ng-repeat元素，之前的元素也会保持其旧值。

    你可以点击这里查看我为你创建的Plunker示例：plnkr.co/edit/lzribQXc9E5w6LDTFDwB?p=preview，其中类名为some的文本是红色的（.some { color: red;}）。当你点击一个项时，所有的项都会变为红色。你可以随意修改这个示例，希望这能帮助你更好地理解你的需求。

    0
    0 Comments

    AngularJS是一个流行的JavaScript框架，用于构建动态Web应用程序。在使用AngularJS时，有时候会遇到需要从一个ng-repeat指令中的元素点击事件来操作其他ng-repeat指令中的元素的情况。下面是一个关于如何通过ng-click指令将所有ng-repeat指令连接起来的问题：

    问题原因：

    这个问题的原因是需要通过点击一个ng-repeat指令中的元素来操作其他ng-repeat指令中的元素，但是ng-repeat指令默认是在每个元素的作用域中运行的，所以无法直接访问其他元素的作用域。

    解决方法：

    一种解决方法是使用ng-class指令，该指令可以根据某个条件为元素添加类。通过设置一个布尔值变量，可以在ng-repeat指令中为特定的元素添加类。

    在控制器中，可以定义两个函数someFunction和someOtherFunction来设置变量active和loading的值为true。

    $scope.someFunction = function (){
    $scope.active = true;
}
$scope.someOtherFunction = function (){
    $scope.loading = true;
}

    然后在HTML中，使用ng-class指令为ng-repeat指令中的元素添加类。在ng-class指令中，通过设置对象字面量来指定条件和对应的类名。

    <li ng-class="{activeClass: active, someOtherClass: loading}" ng-repeat="person in people" ng-click="somefunction()"></li>

    上述代码中，当变量active为true时，会将activeClass添加到li元素的类中；当变量loading为true时，会将someOtherClass添加到li元素的类中。

    通过以上的解决方法，可以实现通过点击一个ng-repeat指令中的元素来操作其他ng-repeat指令中的元素。

    0
    0 Comments

    AngularJS是一个流行的JavaScript框架，用于构建动态的Web应用程序。它提供了许多强大的功能，包括数据绑定、模板引擎和自定义指令等。

    在使用AngularJS时，有时我们需要在一个ng-repeat循环中的元素上触发一个事件，并且希望能够同时操作所有循环中的元素。然而，默认情况下，ng-click事件只能操作当前循环的元素。

    为了解决这个问题，我们可以使用ng-class指令和ng-click事件来实现。通过在ng-click事件中传入要设置的类名，我们可以在点击任何一个元素时，将类名应用到所有ng-repeat循环中的元素上。

    下面是一个示例代码，展示了如何通过ng-click事件将类名应用到所有ng-repeat循环中的元素上：

    
  {{ item.name }}

    在上面的代码中，ng-repeat指令用于循环遍历一个名为items的数组。每个循环中的元素都包含一个名为isSelected的属性，用于判断是否应用特定的类名。

    接下来，我们定义了一个按钮，并为其添加了ng-click事件。在ng-click事件中，我们调用了一个名为applyClass的函数，并传入了要应用的类名。

    在控制器中，我们需要定义applyClass函数，并在其中修改isSelected属性的值。这样，当我们点击按钮时，isSelected属性的值将被修改，从而触发ng-class指令，将类名应用到所有ng-repeat循环中的元素上。

    下面是控制器中的示例代码：

    $scope.items = [
  {name: 'Item 1', isSelected: false},
  {name: 'Item 2', isSelected: false},
  {name: 'Item 3', isSelected: false}
];
$scope.applyClass = function(className) {
  angular.forEach($scope.items, function(item) {
    item.isSelected = true;
  });
};

    在上面的代码中，我们定义了一个名为items的数组，其中每个元素都包含一个名为isSelected的属性。applyClass函数通过使用angular.forEach方法遍历items数组，并将isSelected属性的值设置为true，从而将类名应用到所有元素上。

    最后，我们可以在CSS样式表中定义所需的类名，并对其进行样式设置。例如，我们可以使用以下代码定义selected类的样式：

    .selected {
  background-color: yellow;
}

    通过以上的步骤，我们可以实现点击一个元素后，将类名应用到所有ng-repeat循环中的元素上。这样，我们就能够同时操作所有循环中的元素了。

    希望本文对你理解AngularJS中如何通过ng-click事件将类名应用到所有ng-repeat循环中的元素有所帮助。如果你想查看完整的示例代码，请点击下面的链接：[http://plnkr.co/edit/oXavr7CVTpPfPUZJO0f9?p=preview](http://plnkr.co/edit/oXavr7CVTpPfPUZJO0f9?p=preview)

    0