1

我想输出一个基本的名称列表，并在列表下方显示一些文本。此文本仅应在您单击一个项目后显示，并且在选择另一个项目时应切换。

到目前为止我所拥有的

<div ng-app>
    <div ng-controller="contacts">
        <ul>
            <li ng-repeat="person in people | orderBy:'name'">
                <a  href="#">{{person.name}}</a>
                <span>{{person.age}}</span>

            </li>
        </ul>
        <div class="desc">
        <!-- I  would like to output the descriptions here -->
        </div>
   </div>
</div>   
<script>
var contacts = function($scope) {
    $scope.people = [
        {name:"paul", age:30, desc:"this is a description"},
        {name:"jax", age:33, desc:"this is another description right here"},
        {name:"yoda", age:33, desc:"final description goes here"},
        {name:"steve", age:53, desc:"jsut kidding - one more."}
    ];
};
</script>

我很确定我应该使用 ng-click 和可能的模型等，但这个简单的任务正在我的脑海中。我能够做一个基本的展示并隐藏在链接下方（虽然不确定切换它们）。

超级新手，如果这似乎是一个迟钝的要求，请原谅。寻找一种超级干净、快速和简单的方法来做到这一点。任何输入都会很棒。

4

1 回答 1

3

没有愚蠢的问题；在某些时候，我们都是新手 :)

控制器

var contacts = function($scope) {
    $scope.people = [
        {name:"paul", age:30, desc:"this is a description"},
        {name:"jax", age:33, desc:"this is another description right here"},
        {name:"yoda", age:33, desc:"final description goes here"},
        {name:"steve", age:53, desc:"jsut kidding - one more."}
    ];
  $scope.selectedPersonDescription = null;
  $scope.selectPerson = function(person) {
    $scope.selectedPersonDescription = person.desc;
  }
};

看法

<div ng-app>
    <div ng-controller="contacts">
        <ul>
            <li ng-repeat="person in people | orderBy:'name'", ng-click="selectPerson(person)">
                <a  href="#">{{person.name}}</a>
                <span>{{person.age}}</span>

            </li>
        </ul>
        <div class="desc">
        {{ selectedPersonDescription }}
        </div>
   </div>
</div>
于 2013-09-12T21:41:58.970 回答