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

I have a working plunker where you select a thing from a dropdown and it displays data. I would like to be able to click one of those items and it to fill another list below. with other data. I know of ng-click and thats what I am using currently to just pop up an alert with the data I want to be in the list.

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

This is the section in question:

这是有问题的部分：

  <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>

Ideally I want a list like what is in the popup something like:

理想情况下，我想要一个列表，如弹出窗口中的内容：

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

Like what is in the popup, but to show up below the list of things displayed from choosing the dropdown. (on my webpage it will be over to the right so I am not concerned about formatting, just how to do it). But I DO NOT want the the list to show up if I don't click on an option.

与弹出窗口中的内容类似，但显示在选择下拉列表中显示的内容列表下方。（在我的网页上它会在右边，所以我不关心格式化，只是如何做到这一点）。但是如果我没有点击选项，我不希望列表显示出来。

Plunker here.

在这里偷窃。

edit: I am beginning to think maybe an ng-show will do the trick in some fashion, yet, I still do not know how I would pass the data down to the list.

编辑：我开始认为也许ng-show会以某种方式完成这个技巧，但是，我仍然不知道如何将数据传递到列表中。

3 个解决方案

#1

Create a div that will be visible when a message variable is available.

创建一个在消息变量可用时可见的div。

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

and in your controller, assign the contents for the moreInfo to a $scope.message:

并在您的控制器中，将moreInfo的内容分配给$ scope.message：

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

Here's an updated plunker.

这是一个更新的plunker。

#2

I edited your plunker , hope that is what you wanted.. and it's better for you to use controller as syntax article and you should looki into styleguide too i like this one by John Papa styleguide

我编辑了你的plunker，希望这是你想要的...而且你最好使用控制器作为语法文章，你应该看看styleguide我喜欢这个由John Papa styleguide

#3

It's actually quite straightforward:

它实际上很简单：

First, set your new text to a scope value on click:

首先，在点击时将新文本设置为范围值：

$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);
};

Then, simply assign this value to another div:

然后，只需将此值分配给另一个div：

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

Then, whenever you click on the results, curResults is updated and shown in that div.

然后，每当您单击结果时，curResults将更新并显示在该div中。

ng-show="curResults" makes sure the div is only shown when there's a value set to curResults.

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

#1