Question

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

这是有问题的部分：

  <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可能会以某种方式处理这个技巧，但是，我仍然不知道如何将数据传递到列表中。

Answer 1

我修改了你的plunker，希望这就是你想要的...而且你最好使用controller as语法article，你应该看看styleguide我喜欢这个约翰帕帕styleguide

Answer 2

创建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; };：

#knight {
  background-color: blue;
}
#knight:hover {
  background-color: green;
}

以下是更新的 plunker 。

Answer 3

实际上非常简单：

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

$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"确保仅在值设置为curResults时显示div。

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

3 个答案: