Question

我正在尝试创建一个简单的单页应用程序来跟踪人们的移动。我大部分都按照自己的意愿工作，但是当我在第二，第三和第四个孩子的人中使用我的点击功能来改变人的第一个孩子的班级时，它改变了班级但也改变了所有以下的班级由重复创建的人员div。我想要做的是隔离每个人div，所以当我改变第一个孩子的类时，它不会通过所有其他人的回声。我不确定如何做到这一点

这是一个HTML示例。

<div ng-repeat="x in pers" class="person">
    <div ng-class="name">{{ x.person }}</div>
    <div class="out" ng-click="changeClassOut()">Out</div>
    <div class="in" ng-click="changeClassIn()">In</div>
    <div class="onsite" ng-click="changeClassOnsi()">On site</div>
    <div class="notes">
        <div class='n'></div>
        <div class='dn'>Delete note</div>
        <div class='an'>Add note</div>
    </div>
</div>

以下是控制器的示例。

app.controller("MainController", ['$scope',  function($scope) {
$scope.pers = [
    {
        person: 'Nick',


    },
    {
        person: "Greg",

    }
];

$scope.name = "name";
$scope.changeClassIn = function(){
    if ($scope.name === "name")
        $scope.name = "name-in";
    else if ($scope.name === "name-out")
        $scope.name = "name-in";
    else if ($scope.name === "name-onsite")
        $scope.name = "name-in"
    else
        $scope.name = "name-in";
};

非常感谢任何帮助。

Answer 1

您需要在每个scope对象中移动name变量person。否则，每个person都会保持通用。这就是它更新每个div

的类的原因

$scope.pers = [
{
    person: 'Nick',
    name: 'name
},
{
    person: "Greg",
    name: 'name
}];

现在您必须通过person ng-click

传递ng-click="changeClassOut(x)"个对象

<div ng-repeat="x in pers" class="person">
 <div ng-class="name">{{ x.person }}</div>
 <div class="out" ng-click="changeClassOut(x)">Out</div>
 <div class="in" ng-click="changeClassIn(x)">In</div>
 <div class="onsite" ng-click="changeClassOnsi(x)">On site</div>
.......

在你的控制器中，

$scope.changeClassIn = function(person){
    if (person.name === "name")
        person.name = "name-in";
    else if (person.name === "name-out")
        person.name = "name-in";
    else if (person.name === "name-onsite")
        person.name = "name-in"
    else
        person.name = "name-in";
};

AngularJS更改ng-repeat中的元素而不进行全部操作

1 个答案: