0

我有一个元素列表，我想通过单击折叠到单个选定元素。我无法让控制器上的代码刷新列表。我究竟做错了什么？我认为更改 $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>
4

2 回答 2

0

我认为你会以一种不带角度的方式来解决这个问题。我为你做了一个 plunk，向你展示我将如何解决这个问题：

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

于 2013-09-05T14:44:39.357 回答
0

正如@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/

于 2014-06-11T15:11:53.710 回答