Question

我试图让客户列表和详细信息视图工作，但我似乎无法弄明白。 NG-init不会工作也不会点击，如果硬编码，我可以让它工作，但是当动态加载数据时它不会工作。如果有人能指出执行此操作的正确方法，我将不胜感激。

HTML：

<div ng-controller="ClientCtrl as clients">
    <table class="listview">
        <tbody>
            <tr ng-repeat="stuff in clients.records">
                <td><a ng-click="client = {{$index}}"  class="client-link">{{stuff.first_name}} {{stuff.last_name}}</a></td>
            </tr>
        </tbody>
    </table>
    <div class="detailview">
        <div ng-repeat-start="things in clients.records " ng-if="$first">
            <div id="contact-{{$index}}" class="tab-pane active"  ng-show="client == {{$index}}" ng-init="client = {{$index}}">
                <h2>{{things.first_name}} {{things.last_name}}</h2>
            </div>
        </div>
        <div ng-repeat-end="things in clients.records " ng-if="!$first">
            <div id="contact-{{$index}}" class="tab-pane active"  ng-show="client == {{$index}}" ng-init="client = {{$index}}">
                <h2>{{things.first_name}} {{things.last_name}}</h2>
            </div>
        </div>
    </div>
</div>

controller.js：

function ClientCtrl($scope,$http,$interval, $rootScope){
    var ClientCtrlData = this;
    $http.get("api/clients").success(function(response) {
        ClientCtrlData.records = response.records;
    });
    var promise;
    // simulated items array
    $scope.items = [];
    // starts the interval
    $scope.start = function() {
        // stops any running interval to avoid two intervals running at the same time
        $scope.stop();
        // store the interval promise
        promise =   $interval(
            function(){
                $http.get("api/clients").success(function(response) {
                    ClientCtrlData.records = response.records;
                    console.log("People loaded");
                });
            }.bind(this)
            ,1000000 * 10);
    };
    // stops the interval
    $scope.stop = function() {
        $interval.cancel(promise);
    };
    // starting the interval by default
    $scope.start();
    $scope.$on('$destroy', function() {
        $scope.stop();
    });
}


angular
    .module('inspinia')
    .controller('ClientCtrl',ClientCtrl)

plnkr http://plnkr.co/edit/yzN787uL6C82Z6g6JNOq

Answer 1

首先，不需要使用$(e.target).closest('li').is('.one')，您已经说过应该使用angular解析代码，因此不需要使用尖括号ng-click="client = {{$index}}"。

其次，您需要将{{ }}内的客户端作为范围，例如ng-click="client = $index"，否则angular不知道在哪里查找该属性。

我也想知道ng-click="clients.client = $index"需要什么？我猜这只是模拟功能，因为现在它只会为每个项目设置ng-init变量，直到它最终成为列表中的最后一个。

在任何情况下，这是一个具有固定语法的代码版本，您应该可以从这里获取

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

clients.client

使用NG-show进行NG重复不使用动态数据执行

1 个答案: