Question

我有一个元素列表，我想在点击时折叠到一个选定的元素。我无法让控制器上的代码刷新列表。我究竟做错了什么？我认为更改$ scope会使视图重新加载。

我通过更改视图中引用的$ scope变量使其工作。所以我的猜测是视图上引用的变量与任何其他$ scope属性的处理方式不同。是吗？

AptListCtrl = ($scope) ->
   console.log apt_selected
   if $scope.apt_selected?
       $scope.apts = [$scope.apt_selected]
    else
        $scope.apts = apts
    $scope.aptClick = ($event, apt) ->
        if $scope.apt_selected?
            if $scope.apt_selected is apt
                $scope.apt_selected = null
            else
                $scope.apt_selected = apt
        else
            $scope.apt_selected = apt
        $('#selected_apt').html('Selected: ' + apt.title)
        $scope.$watch('apt_selected', (newv, oldv, scope)->
            console.log 'new'
            console.log newv
            console.log 'old'
            console.log oldv
        )
        $scope.$digest()




            <ul class="list-group" ng-controller = "AptListCtrl">
                    <li class="list-group-item" ng-repeat = "apt in apts"
                    ng-click="aptClick($event, apt)" ng-model = "apt_selected">
                    <a href="#">{{apt.marker_text}}</a>
                    </li>
            </ul>

Answer 1

我认为你是以一种无棱角的方式解决这个问题。我为你准备了一个问题，告诉你我将如何解决这个问题：

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

Answer 2

正如@JSager指出的那样，你可以更好地利用Angular。假设'$ scope.apts'是一个项目数组而$ scope.apt_selected是单击的，你在控制器中只需要很少。只需定义变量：

$scope.apts = {
    list: ['apt 1','apt 2','apt 3'],
    sel: null
}

注意：我将vars更改为Object，因为ng-repeat会创建一个新的子范围。在我的HTML下面，我使用'ng-click'来设置apts.sel的值。因为您在父作用域上设置var属性的值，所以它可以工作，但如果您尝试从'ng-repeat'中设置控制器var的值，它将无法工作。

您想要做的更多是一种行为。行为最好在HTML中处理（如果需要，可能还有指令）。您可以使用'ng-show'和'ng-hide'轻松显示/隐藏内容（两者都采用可以计算为布尔值的布尔值或表达式）。以下是实现此目的的一种方法：

<ul>
    <li ng-repeat="apt in apts.list"
        ng-click="apts.sel = apt" 
        ng-show="apts.sel == null || apts.sel == apt">
        {{apt}}
    </li>
</ul>

以下是它的一个小提琴：http://jsfiddle.net/gklandes/24FDj/1/

控制器在更改后不重新加载视图

2 个答案: