删除ng-repeat中的对象而不影响其他类似对象

时间:2014-01-10 15:23:35

标签: javascript json angularjs

我有一个正在构建程序的表单,每个程序都有几周,每周都有正在构建的日期,如本笔所示http://codepen.io/Irish1/pen/lbjdw

和代码,为简洁起见删除了输入

HTML              

        <button type ="button" ng-click="addWeek()"> add week</button>

        <div ng-repeat="week in program.weeks">
         <p>a week</p>

            <div ng-repeat="day in week.days">
                <p> a day</p>
            </div>
            <button type ="button" ng-click="addDay($index)"> Add Day</button>
            <button type ="button" ng-click="remove($index)"> Remove week</button>
        </div>

        <button type="submit"> add program</button>
    </form>
 </div>

</div>

app.js

var myModule = angular.module("trainercompare", ['ui.bootstrap']);

function programsController($scope, $http) {

    var numweeks = 1;
    $scope.program = { 

    };

    $scope.addWeek = function() {

        if (isDefined($scope.program.weeks)) {
            $scope.program.weeks.push(
                {

                }
            );

        } else {
            $scope.program = { 
                weeks: [
                    {

                    }
                ]
            };
        }
    };

    $scope.addDay = function(index) {

        if (isDefined($scope.program.weeks[index].days)) {
            $scope.program.weeks[index].days.push(
                {

                }
            );

        } else {
            $scope.program.weeks[index] = { 
                days: [
                    {

                    }
                ]
            };
        }
    };

    $scope.remove = function(index) {
        $scope.program.weeks.splice(index, 1);

        console.log(index);

    };

    function isDefined(x) {

    return x !== undefined;
    }

    $scope.addProgram = function() {

        console.log($scope.program);

        $http.post('/programs', $scope.program).success(function(data, status) {
            if(isDefined(data.errors)) {
                console.log(data.errors);
                $scope.errors = data.errors;
                }
            if(isDefined(data.success)) {
                console.log(data.success);
                $scope.errors = [];
            }
        });

    }; 


}

我希望能够删除添加到一周的任何一天,而不会影响可能具有相同索引的其他几周的日期我认为我需要做这样的事情

$scope.program.weeks[1].days.splice(index, 1);

但我不知道如何从ng-repeat ='天数'中访问周指数

我还想修改上面显示的当前删除方法,以便它可以用于删除一周或一天或将来添加到对象的任何其他内容,但我不知道如何将其传递给正确的数组应该从

中删除对象

2 个答案:

答案 0 :(得分:1)

您应该能够访问$ parent。$ index,这将为您提供周索引。

你的删除方法可能看起来像......

$scope.remove = function(parentIndex, index) {
        $scope.program.weeks[parentIndex].splice(index, 1);
        $scope.apply();    
    };

答案 1 :(得分:1)

我不知道这是否比杰森更好,但这就是我通常的做法。

我使用ng-init$index存储到范围变量中,以便在内部和外部$scopes之间存在其他ng-repeat您没有必须添加更多$parent(也许这不可能以某种方式,但这就是我所做的)。

http://plnkr.co/edit/DH8MP8i65UAjq8oLBtnX?p=preview

Plunkr的相关代码:

<强>控制器:

$scope.outer = [
  [1, 2],
  [3, 4, 5]
];

<强>模板:

<div ng-repeat="o in outer" ng-init="oIndex = $index">
  <div ng-repeat="i in o" ng-init="iIndex = $index">outer[{{oIndex}}][{{iIndex}}] == {{ outer[oIndex][iIndex]}}</div>
</div>