单击一个ng-repeat中的项目以填充另一个列表

我有一个工作plunker，您可以从下拉菜单中选择一个项目并显示数据。我希望能够点击其中的一个项目并填写下面的其他列表。与其他数据。我知道ng-click，这就是我目前使用的弹出一个警报与我想要在列表中的数据。单击一个ng-repeat中的项目以填充另一个列表

这是有问题的部分：

<div> 
    <select ng-options="post as post.id for post in allPosts" ng-model="selectPost" ng-change="select()"> 
     <option value="">--select--</option> 
    </select> 
    <input type="text" ng-model="searchText" ng-change="search()" /> 
    <ul> 
     <li data-ng-repeat="item in records | orderBy:'email':reverse" ng-click="moreInfo(item)"> 
     {{item.email}} 
     </li> 
    </ul> 
    </div>

理想我想喜欢在弹出类似的列表：

Email: 'email...' 
Name: 'name...' 
Body: 'body...'

喜欢在弹出，但显示出来低于从选择下拉列表中显示的事物列表。（在我的网页上，它将会在右边，所以我不关心格式化，只是怎么做）。但我不要如果我不点击一个选项，想要显示列表。

Plunker here.

编辑：我开始想，也许一个ng-show会做的伎俩以某种方式，但是，我仍然不知道我怎么会通过数据到列表。

来源

2015-04-23 erp

创建div这当message变量可用时将会显示。

<div ng-show="message"> 
    {{ message }} 
</div>

，并在你的控制器，分配内容的moreInfo到$scope.message：

$scope.moreInfo = function(id) { 
    $scope.message = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body; 
};

这里有一个更新的plunker。

来源

2015-04-23 13:06:14 cch

好吧，你提供了一个运动员，我喜欢它最好的，所以现在你赢了！：）谢啦。 – erp

没问题，很高兴我能帮到你！ – cch

我编辑你的plunker，希望这是你想要的东西..它是更好地为你使用controller as语法article，你应该looki到风格指南过我喜欢这个由约翰·帕帕styleguide

来源

2015-04-23 13:02:16

考虑发布一些您更改的代码，说明需要做些什么才能使其发挥作用。 – JimmyBoh

是的，你是对的下一次我会做:-) –

这其实很简单：

首先，设置你的新文本的范围值上点击：

$scope.moreInfo = function(id) { 
    $scope.curResults = "Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body 
    //alert("Email: " + id.email + "\nName: " + id.name + "\nBody: " + id.body); 
};

然后，只需将该值赋给另一个DIV：

<div ng-show="curResults">{{curResults}}</div>

然后，只要您点击结果，curResults就会更新并显示在该div中。

ng-show="curResults"确保div仅在值设置为curResults时显示。

来源

2015-04-23 13:07:26 Huey

单击一个ng-repeat中的项目以填充另一个列表

回答

相关问题