Search code examples
htmlangularjsmeanjs

Get drop down from array of object values using meanjs?


  • I am trying to get the values as a drop down or select field which were with in the comments array.

  • I am trying for comments array of object commentText values in the drop down, how can i do this in the ng-option ?. My Plunker

For Example:

  • I have did the drop down ng-option for first without array value like ng-options="item.title for item in questions".

  • What I am exactly looking for comments array of object values [commentText": "7A"] in the drop down how can i do that.

  • I tried ng-options="item for item.comments.commentText in questions" it's not working for me. How to fix it?

My Data:

$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"
}
]

My 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 for item.comments.commentText in questions">
  </select>
</div>

Looks for second solution is :-

  • I just want if we select question , comments select filter only this question's comments...how to do this... thanks

Solution

  • var myApp = angular.module('exApp',[]);
    
    myApp.controller('myctrl', function($scope){
     $scope.questions = [
    {
    "_id": "59df6c37b6748bc809050699",
    "user": {
    "_id": "59df6a76b6748bc809050697",
    "profileImageURL": "modules/users/client/img/profile/default.png"
    },
    "__v": 1,
    "openeyers": [],
    "openeyes": 0,
    "upvoters": [],
    "upvotes": 0,
    "isLiked": false,
    "users": [],
    "comments": [
    {
    "created": 1507897712831,
    "email": "ms@e21designs.com",
    "name": "Maniselvam selvam",
    "link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
    "commentText": "7A"
    },
    {
    "created": 1507897712831,
    "email": "ms@e21designs.com",
    "name": "Maniselvam selvam",
    "link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
    "commentText": "9A"
    },
    {
    "created": 1507897712831,
    "email": "ms@e21designs.com",
    "name": "Maniselvam selvam",
    "link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
    "commentText": "10A"
    }
    ],
    "questionid": "",
    "title": "Silver jublie",
    "created": "2017-10-12T13:20:55.383Z"
    },
    {
    "_id": "59df6c37b6748bc809050699",
    "user": {
    "_id": "59df6a76b6748bc809050697",
    "displayName": "Maniselvam selvam",
    "dob": "1991-05-10T07:00:00.000Z",
    "profileImageURL": "modules/users/client/img/profile/default.png"
    },
    "__v": 1,
    "openeyers": [],
    "users": [],
    "comments": [
    {
    "created": 1507897712831,
    "email": "ms@e21designs.com",
    "name": "Maniselvam selvam",
    "link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
    "commentText": "8A"
    }
    ],
    "questionid": "",
    "title": "Public School",
    "created": "2017-10-12T13:20:55.383Z"
    }
    ];
    $scope.editClass = function(section){
    $scope.sectionwithObject = section;
    $scope.sectionOnly=section.commentText;
    $scope.newLink = section.link;
    }
    });
    <html>
      <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
    
      </head>
      <body ng-app="exApp" ng-controller="myctrl">
    
    <div>
      <div>
      <label>1. Without array value</label>
      <select ng-model="ques"  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="commen"  ng-options="item as item.commentText for item in ::ques.comments" ng-change="editClass(commen)">
      </select>{{commen}}
     <br><br>
      <div>
        <input type="text" ng-model="sectionwithObject.commentText"/><br><br>
         <input type="text" ng-model="sectionOnly"/>
      </div><br>
      <div>
        <lable> Link</lable>
        <input type="text"  ng-model="sectionwithObject.link" /><br><br>
            <input type="text"  ng-model="newLink" />
      </div>
      </div>
      
     
    
    </div>
    
    
      </body>
    </html>