Question

对于项目列表，我想在项目点击后显示详细信息。详细信息将加载ajax请求。我有类似的东西：http://jsfiddle.net/asmKj/ 如何修改它以使用动态加载的细节？

当然，我必须在我的控制器中准备这样的功能：

$scope.getDetails = function (name) {
    return $scope.details = myService.getDetails(name).then(function (details) {
        return $scope.details = details;
    });
}

但是如何将这些数据绑定到详细信息div？

Answer 1

我宁愿改变这样的事情：

<强> HTML

<ul class="procedures" ng-app ng-controller="sample">
    <li ng-repeat="procedure in procedures">
        <h4><a href="#" ng-click="getDetails($index)">{{procedure.definition}}</a></h4>
         <div class="procedure-details" ng-show="procedures.isVisible">
            <p>Number of patient discharges: {{procedure.discharged}}</p>
         </div>
    </li>
</ul>

JS

$scope.procedures = [
    {
        definition: 'Procedure 1',
        discharged: 23
    },
    {
        definition: 'Procedure 2',
        discharged: 2
    },
    {
        definition: 'Procedure 3',
        discharged: 356
    }
];

$scope.getDetails = function ($index) {
    $http.get('your-url').success(
       // use the data retrieved
       procedures[$index].isVisible = !procedures[$index].isVisible;
    );
}

Answer 2

基本上有两种选择。

将procedure个对象中的所有内容作为单独的属性（加载详细信息时） - 然后您可以在procedure.showDetails中使用ng-repeat。
< / LI>
使用$index从procedures获取索引 - 然后您可以使用它来访问ng-repeat中范围内的任意收藏。

（当您提供有关数据结构的更多信息时，可能会更新我的答案;如果仍需要）

列出AngularJS中的ajax加载细节

2 个答案: