【问题标题】:How to get with in array values in ng-options using of angularjs?如何使用 angularjs 在 ng-options 中获取数组值?
【发布时间】:2017-10-26 21:05:22
【问题描述】:

我正在尝试将值作为下拉列表或选择字段获取,这些字段位于 comments 数组中。我正在尝试drop downcommentText 值的comments 数组,我该如何在ng-option 中执行此操作? My Plunker

例如:

我做了下拉ng-option 首先没有数组值。现在我在下拉列表中寻找 [commentText": "7A"] 的 cmets 数组值,我该怎么做。

我试过 ng-options="item.comments.commentText for item in questions" 它不适合我。如何解决?

我的数据:

    $scope.questions = [
{
"_id": "59df6c37b6748bc809050699",
"user": {
"_id": "59df6a76b6748bc809050697",
"profileImageURL": "modules/users/client/img/profile/default.png"
},
"__v": 1,
"comments": [
{
"created": 1507897712831,
"email": "ms@e21designs.com",
"name": "Maniselvam selvam",
"link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
"commentText": "7A"
}
],
"questionid": "",
"created": "2017-10-12T13:20:55.383Z"
}
]

我的 HTML:

    <label>1. Without array value</label>
  <select ng-model="class"  ng-options="item.title for item in questions">
  </select>
  </div>

  <div style="margin-top: 11px;">
  <label>2. With comments array value</label>
  <select style="margin-left: 20px;" ng-model="class"  ng-options="item.comments.commentText for item in questions">
  </select>
  </div>

【问题讨论】:

  • 这能做到吗ng-options="element.commentText for element in class.comments"class 来自您选择的问题的 ng-model。否则你需要flatten你的双数组
  • 感谢您的评论,如果可能的话,您能否更新我的 plunker...
  • 只需将您的第二个选择更改为&lt;select style="margin-left: 20px;" ng-model="class2" ng-options="element.commentText for element in class.comments"&gt;。确保您的 ng-model 不同
  • 我已经用你的答案更新了我的 plunker plnkr.co/edit/ultpnNcFbIdFXur4XJU3?p=preview,它对我不起作用,所以请检查并更新,我不知道我在哪里做错了
  • 我的意思是您首先选择一个问题(这就是第一个选择的目的),然后从该问题的 cmets 列表中选择一条评论。毕竟你有一个嵌套数组。如果你想要所有问题的所有 cmets,那么你需要先展平你的数组,我之前给了你一个例子的链接

标签: html angularjs meanjs


【解决方案1】:

编辑: 这就是我编辑的内容: 我将所有问题的所有 cmets 合并到一个数组中,并将问题 ID 添加到每个评论中(就像我们可以使用问题(第一个选择的 ng-model)过滤一样) 希望对你有帮助

  <div ng-controller="MyCntrl">
    <div>
      <label>1. Without array value</label>
      <select ng-model="question" ng-options="item.title for item in questions">
      </select>
    </div>

    <div style="margin-top: 11px;">
     <label>2. With comments array value</label>
     <select style="margin-left: 20px;" ng-model="class" ng-options="item.commentText for item in filteredComments()">
     </select>
    </div>

控制器的他脚本(在cmets中更改了question_id以获得一个实际示例)

$scope.comments = [];
  $scope.question = {};
  angular.forEach($scope.questions, function(item) {
    angular.forEach(item.comments, function(comment) {
      comment.question_id = item._id;
      $scope.comments.push(comment);
    });
  });

  $scope.filteredComments = function() {
    if ($scope.question._id) {
      var filteredComments = [];
      angular.forEach($scope.comments, function(item) {
        if (item.question_id == $scope.question._id) {
          this.push(item);
        }
      }, filteredComments);

      return filteredComments;
    } else {
      return $scope.comments
    };
  }

http://plnkr.co/edit/UzP9fnsxxPfngVRAW0c0?p=preview

【讨论】:

  • 我不知道你的目标是什么,但我认为你想做第二个选择(cmets)取决于第一个(问题)?如果是这样,那么答案不是很好。不客气
  • 嗨,Amenz,您的答案对我不起作用,因此请检查并更新,实际上我们有两所学校和两个 cmets [部分],如 7A 和 8A,但您的答案下拉仅显示一个部分,如 7A 所以plaese check and plunker as well to know the exact answer...
  • 它是可见的,因为第二个选择只重复第一个问题 cmets!你能在更新前回答这些问题吗: - 你想列出所有的 cmets 吗? - 如果我们选择 question , cmets select 是否只过滤这个问题的 cmets?
  • 是的,第二个是正确的,我只想如果我们选择问题,cmets 选择只过滤这个问题的 cmets...感谢您的帮助,请更新 plunker.....
  • 嗨,Amenz,这是我的 html 代码&lt;div&gt; &lt;select id="school_section_change" name="school_section_change" ng-model="vm.school_section_change" ng-options="item.commentText for item in vm.filteredComments()"&gt;&lt;/select&gt;&lt;/div&gt;你的答案对我不起作用,因为我的问题是你在script.js 中使用了$scope,但我在我的代码中使用vm所以请检查my ng-module,如果可能,请使用 $scope 而不是vm 编辑您的答案,谢谢.....
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-01-10
  • 2017-12-31
  • 1970-01-01
相关资源
最近更新 更多