Question

这里是plunker： http://plnkr.co/edit/Qj2yxQuT7SZ19u3vuXyq?p=preview

就像收件箱一样。

<div class="col-xs-4 leftnav">

    <button class="btn btn-primary btn-block">Add News</button>
    <br>

    <article ng-repeat="x in issues | filter:query" ng-click="makeActive(i)">
        <h4>{{x.title}}</h4>
        <p>{{x.message | limitTo:numLimit}}</p>
        <a href="">Read More..</a>
    </article>

</div>

<div class="col-xs-8 main-content">
    <h2>News</h2>
    <hr>

    <article ng-repeat="x in issues">
        <h3 >{{x.title}}</h3>
        <p>{{x.priority}}</p>
        <p class="lead">{{x.author}} - 6/12/2014</p>
        <!-- ng-if="x.author == 'Andy' " -->
        <hr>
        <p>{{x.message}}</p>
        <a href="">Read More</a>
        <hr>
    </article>
</div>

在左侧显示项目列表，然后从选项中选择主要内容（在右侧），然后将完整内容显示为主要选项。

ng-if？ ng-show？

不确定我对此有多描述，但从小提琴开始就应该很明显。

提前感谢。

Answer 1

我修改了你的plnkr http://plnkr.co/edit/9qZsp2o22L5x1a0JofPy?p=preview

我为您正确的内容显示创建了一个currectIssue变量。
在左侧内容中，<a href="">Read More..</a>已更改为<a ng-click="showIssue(x)">Read More..</a>

Answer 2

更新了plunk：http://plnkr.co/edit/hGsdkybRMoRct8VykCcB?p=preview

嗯，你可能会考虑： - 使用另一个范围变量来显示对象中的选定项 - 我会在这种情况下使用ng-if，因为它会根据需要创建/销毁内容

// controller
$scope.selectIssue = function(x) {
  $scope.issue = x;
}

$scope.selectIssue($scope.issues['1']);

//view 

<article>
  <h3 >{{issue.title}}</h3>
  <p>{{issue.priority}}</p>
  <p class="lead">{{issue.author}} - 6/12/2014</p>
  <div ng-if="issue.author == 'Andy'">
    <hr>
    <p>{{issue.message}}</p>
    <a href="">Read More</a>
    <hr>
  </div>
</article>

更改ng-repeat项目单击时的主要内容

2 个答案: