用angularjs點擊更新頁面部分

我是新來的角。如果這是重複的，請發佈鏈接。用angularjs點擊更新頁面部分

好了，我在javascript我有一個項目列表，可以說這樣的：

[{ 
    name: 'Bob', 
    age: 24, 
}, 
{ 
    name: 'Smith', 
    age: 56, 
}, 
{ 
    name: 'Lisa', 
    age: 12, 
}]

所有name屬性的列表頁面的左邊打印出來，像這樣：

<li data-ng-repeat="person in persons">{{tournament.name}}</li>

所有這些工作，但這是事。當我點擊列表中的某個人時，我想在該列表的右側顯示關於該人的更詳細信息。

如果我在列表中單擊Bob，它應該在列表的右側同時顯示name和age。

我無法弄清楚角度。任何人都可以解釋我如何用該信息更新頁面的一部分？

來源

2013-09-24 ptf

他們有一個真正偉大的[教程]（http://docs.angularjs.org/tutorial）是越過這與許多其他議題的基礎。 –

你可以做到這一點與您立一個簡單的點擊這樣的：

<ul data-ng-repeat="person in persons"> 
    <li ng-click="detail($index)">{{person.name}}</li> 
</ul>

的$指數是NG重複真正有用的一起奶源指數數組！

你加，你想看到的人的細節一個div：

<div> 
    {{personDetail.name}} {{personDetail.age}} 
    </div>

在你的控制器實現這樣的細節函數：

var app = angular.module('MyApp', []); 

app.controller('MyCtrl', function($scope){ 

    $scope.persons = [{ 
         name: 'Bob', 
         age: 24, 
        }, 
        { 
         name: 'Smith', 
         age: 56, 
        }, 
        { 
         name: 'Lisa', 
         age: 12, 
        }]; 

    $scope.detail = function(index){ 
     $scope.personDetail = $scope.persons[index]; 
    }; 

});

瞧！

在這裏工作plnkr：http://plnkr.co/edit/Wg4UD6?p=preview

來源

2013-09-24 13:34:31

是的，因爲它不是什麼特別的東西， –

<!-- left --> 
<li data-ng-repeat="person in persons" ng-click="obj.selected=$index"> 
    {{person.name}} 
</li> 

<!-- right --> 
<div> 
    {{persons[obj.selected]["name"]}} 
    {{persons[obj.selected]["age"]}} 
</div>

控制器：

$scope.obj = { 
    selected:-1 
};

來源

2013-09-24 13:26:39 AlwaysALearner

它有效，但我認爲當你看到他的問題時對他來說有點困難。你可能已經解釋了$ index –

@ThomasPons謝謝，但我知道索引。 – ptf

HTML

<li data-ng-repeat="person in persons" ng-click="clicked(person)">

控制器

$scope.selectedNode = ""; 
... 
$scope.clicked = function(info) { 
    $scope.selectedNode = info; 
};

現在創建右側：

<div> 
    <pre>{{selectedNode | json}}</pre> 
</div>

來源

2013-09-24 13:30:37

很高興看到我們如何以同樣的方式以同樣的方式做同樣的事情 –

用angularjs點擊更新頁面部分

回答

相關問題