Question

我希望通过用户可点击的ul传输不同的数据，但我无法重置具有isactive样式集的li的状态。剥离到最低限度以显示输入框需要两个数字分隔为＆＃39; - ＆＃39;，第一个是可点击框的数量，第二个是开头的不可点击框的数量。

注意当发送新输入时，当前处于活动状态的li保持活动状态。我想将li重置为无效。 [注意：尝试在没有jQuery的情况下学习这个＆＃34; Angular Way＆＃34;。我有一个纯粹的jQuery版本]。 angular.copy没有奏效（虽然这可能是无知的）

我开始认为这可能不得不去，但我只是将图形表示保留在.html中：

html

<div ng-controller="BoxScreen">
        <input type="text" ng-model="inbox" />
        <button ng-click="getBox()" /></button>
        <div>
            <br />
            <h2>{{dys}}, {{dst}}</h2>
            <div>
                <ul class="smallbox">
                    <li data-ng-repeat="s in skip">&nbsp;</li>
                    <li data-ng-repeat="d in ar" ng-class="{'button': !isActive, 'button active': isActive}" ng-init="isActive = false" ng-click="isActive = !isActive; clickMe(d)">{{d}}</li>
                </ul>
            </div>
        </div>
    </div>

的javascript

angular.module('myApp', [])
    .controller('BoxScreen', ['$scope', function($scope) {
        $scope.getBox = function() {
            indat = $scope.inbox.split('-');    
            $scope.dys = indat[0];
            $scope.dst = indat[1];
            $scope.ar = [];
            $scope.skip = [];           
            for(var s=0; s < $scope.dst; s++) {
                $scope.skip.push(s);
            }
            for(var d=1; d <= $scope.dys; d++) {
                $scope.ar.push(d);
            }
        }
        $scope.clickMe = function(did) {
            //
        }
}]);

Answer 1

我相信你的问题与ng-repeat为它附加到DOM的子元素创建新的子范围有关。当您使用新元素展开列表时，ng-repeat实际上不会破坏旧元素（只要它们没有变化，就像您的情况一样），但重用它们。查看更多here。

你在范围内设计你的结构的方式对我来说似乎非常混乱。更好的方法是事先创建所有数据，而不是在HTML中引入所有逻辑。

示例：

<li data-ng-repeat="d in ar.items" ng-class="{'button': !d.isActive, 'button active': d.isActive}" ng-click="ar.toggle(d)">{{d.text}}</li>

其中ar是一个对象：

$scope.ar = {
    items: [
        {
            text: '1',
            isActive: false
        },
        more items...
    ],
    toggle: function(d) {
        d.isActive = !d.isActive;
    }
}

这样您也可以访问其他地方的数据，而不是在子范围上设置一些隐藏的变量。

angularjs - 在ngrepeat之后重置li

1 个答案: