How do I pass JSON objects through Multiple select with angularjs

Question

Hi all I have this multiple select dropdown. I wanted it to be passed through angularjs via JSON objects. Sine I'm new to angular, How do I pass them. Also I want to have SkillId and SkillName as values as well.

This is the html form

<div class="form-group">
    <label class="col-lg-2 col-md-3 control-label">Skills</label>
    <div class="col-lg-10 col-md-9">
        <select id="emp-skills" class="form-control" name="skills" multiple="multiple" ng-model="skills.skillList">
            <option></option>
            <option ng-repeat="skill in skills" value="{{skill.SkillId}}">{{skill.SkillName}}</option>
        </select>
    </div>
</div>

This is the controller.js

    $scope.register = function (isValid) {
if (isValid) {

            var empDetails = {
                'employeedetails': {
                    Fname: $scope.registDetails.Fname,
                    Lname: $scope.registDetails.Lname,
                    Date_of_Birth: $scope.registDetails.Date_of_Birth,
                    Nic: $scope.registDetails.Nic,
                    Gender: $scope.registDetails.Gender,
                    Email: $scope.registDetails.Email,
                    Mobile_no: $scope.registDetails.Mobile_no,
                    Designation: $scope.registDetails.Designation,
                    Date_of_join: $scope.registDetails.Date_of_join,
                    Department_name: $scope.registDetails.Department_name
                },
                'qualification': $scope.records,
                'address': {
                    Addr1: $scope.registDetails.Addr1,
                    Addr2: $scope.registDetails.Addr2,
                    Addr3: $scope.registDetails.Addr3,
                    Addr4: $scope.registDetails.Addr4
                },
                'skills':$scope.skillList
            };

            console.log(empDetails);

              UserService.Register(empDetails, function (res) {
               EMPID = (res.data);
               console.log(res.data);


        }

And the JSON format for Skills

$scope.skills = [
   {
      "SkillId":1,
      "SkillName":"C#"
   },
   {
      "SkillId":2,
      "SkillName":"Angular"
   },
   {
      "SkillId":3,
      "SkillName":"web development"
   }
]

Help would be appreciated I'm been struggling for hrs now. :(

@Chetan Ok so instead of ng-model I should use ng-options? — Ashane Alvis
– Ashane Alvis, Commented Oct 4, 2016 at 8:18
no. refer this- docs.angularjs.org/api/ng/directive/ngOptions. instead of having separate option tag use ng-options in your select tag. — Chetan
– Chetan, Commented Oct 4, 2016 at 8:19

Chetan · Accepted Answer · 2016-10-04 09:21:14Z

1

Please try this- used ng-options

angular.module('app',[]).controller('ntCntr',function($scope){
$scope.skills = [{"SkillId":1,"SkillName":"C#"},{"SkillId":2,"SkillName":"Angular"},{"SkillId":3,"SkillName":"web development"}]

$scope.selectionChanged= function(values){console.clear();console.log(values)}
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div class="form-group" ng-app="app">
    <label class="col-lg-2 col-md-3 control-label">Skills</label>
    <div class="col-lg-10 col-md-9" ng-controller="ntCntr">
      <select id="emp-skills" class="form-control" name="skills" multiple="multiple" ng-options="skill as skill.SkillName for skill in skills track by skill.SkillId " ng-change="selectionChanged(skills.skillList)" ng-model="skills.skillList"></select>
      {{skills.skillList}}
    </div>

edited Oct 4, 2016 at 9:21

answered Oct 4, 2016 at 8:47

Chetan

9425 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ashane Alvis Over a year ago

How do I get the value for var empDetails = { 'skills': <<Here>>} in controller?

Chetan Over a year ago

when you want it any submit button or any other event??

Ashane Alvis Over a year ago

when $scope.register () {} which is a function in a button is triggered everything in the var empDetails should pass to Userservice.Register(empDetails){}

Chetan Over a year ago

added ng-change event to pass valued to controller edited code.

Chetan Over a year ago

when you are calling register function??

|

Collectives™ on Stack Overflow

How do I pass JSON objects through Multiple select with angularjs

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related