Search code examples
htmlangularjsmeanjs

How to bind drop down field value in another input field using meanjs?


  • How to bind drop down field value in another input field using meanjs.

  • Hi all Please look at this Plunker i have created,

  • What I exactly looking is first we select school in plunker then we select school section, then there is a one input filed is available so what i need is section need to bind in that input text field...

  • for example :- if we select 7A (or) 8A in section dropdown, this section value needs to bind that input field, now it's showing error like '[object Object]'...so how to do this.

My Html:-

     <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 question.comments">
  </select>
  {{class.commentText}}
  </div>

  <div>
    <input type="text"  ng-model="newclass"  ng-bind="newclass=class"/>
  </div>

Input Field:-

    <div>
    <input type="text"  ng-model="newclass"  ng-bind="newclass=class"/>
  </div>

My Data :-

    $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": "[email protected]",
"name": "Maniselvam selvam",
"link": "https://drive.google.com/drive/u/0/folders/0B5c-p1bvkfS9REJHMGhMY1BTV1k",
"commentText": "7A"
}
],
"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": "[email protected]",
"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"
}
]

Solution

  • There are two ways to do that first

    Simple set input ng-model to class.commentText something like

    <input type="text"  ng-model="class.commentText"  />
    

    But this will result in change in select option if you change input

    Second way

    asssign value to newClass on select value change

     <select style="margin-left: 20px;" ng-model="class" ng-change="newClass=class.commentText"  ng-options="item.commentText  for item in question.comments">
      </select>
    
    <input type="text"  ng-model="newClass"  />
    

    Working demo