Question

经过广泛搜索，从A ternary in templates获得了一些帮助并获得了部分功能结果，我99％肯定我99％正确，但......显然不完全，所以我在这里

基本的HTML结构：

<ul>
    <li class="week-row" ng-repeat="week in weeks" id="{{$index}}">
        <ul class="tiles" ng-class="{ 'expanded': week.isOpen, 'hidden': !week.isOpen }">
            <li class="day-tile"
                ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }" 
                id="{{$parent.$index + '-' + $index}}" 
                ng-repeat="day in week.days" 
                ng-click="fn2({ week: $parent.$index, day: $index })">

               <!-- moved ng-class to here, and it works? -->
               <div>some stuff in here</div> 

            </li>
        </ul>
    </li>
</ul>

控制器中位于其上方的东西：

$scope.activeDay = null;

$scope.fn1 = function() { $scope.activeDay = '0-0'; }; // this works, and sets the first one active

$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; }; // this sets the first one not active, but none of the others go active

我正在尝试将其中一个嵌套列表项设置为活动状态，基于嵌套数组中的索引，使用$parent.$index和$index作为字符串，加上' - '

让我失望的是console.logging $scope.activeDay，data.week + '-' + data.day以及==和===的比较完全符合我的预期，{{1}当我将activeDay设置为'0-0'时，它适用于初始加载，所以我在绑定中明显遗漏了某些东西或者......？

找到后：https://egghead.io/lessons/angularjs-the-dot - 我尝试将其设置为对象，这样我就无法进入一些奇怪的隔离范围废话：(the same strings, true, true)然后将该属性从我的函数设置为no果。

为什么最初设置它有效，而以后更改它不是？是不正确的类绑定还是......？

我也尝试了

$scope.tiles = { activeDay: null };

并且最初有效，但之后会中断...

非常感谢您的帮助！

更新

将class="day-tile {{activeDay == $parent.$index + '-' + $index ? 'active' : ''}}"移到ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }" ed ng-repeat li内的div上后，效果正常。

为什么会出现这种情况？

Answer 1

根据您提供的信息，我的工作正常jsFiddle。

我将您难以编码的类删除为true并将其粘贴到class=""中。您正在评估i的表达式的类放入ng-class=""。

我将您的功能附加到$scope，以便ng-click可以找到它们。所以$ scope.fn2而不是var fn2。

在不知道更多细节的情况下，我会说这可以解决您的问题。

代码更改：

控制器：

$scope.activeDay = null;

$scope.fn1 = function() { $scope.activeDay = '0-0'; };

$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; };

部分：

    <ul class="tiles" ng-class="{'expanded' : week.isOpen, 'hidden' : !week.isOpen}">
        <li class="day-title"
            ng-class="{'active': (activeDay == $parent.$index + '-' + $index)}" 
            id="{{$parent.$index + '-' + $index}}" 
            ng-repeat="day in week.days" 
            ng-click="fn2({ week: $parent.$index, day: $index })">
            //put expression here so you can see the list item
            {{week.day}}
        </li>
    </ul>

ng-class没有响应Angular模型的变化？

更新

1 个答案: