如何通过使用angularjs的Multiple select传递JSON对象

时间:2016-10-04 08:10:33

标签: javascript angularjs json

大家好我有这个多选下拉列表。我希望它通过JSON对象传递angularjs。我刚才有角度,我怎么通过它们。此外,我还希望将 SkillId和SkillName 作为值。

这是html表单

<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>

这是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);


        }

技能的JSON格式

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

帮助我会感激我现在一直在努力争取。 :(

1 个答案:

答案 0 :(得分:1)

请尝试使用ng-options

&#13;
&#13;
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)}
})
&#13;
<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>
&#13;
&#13;
&#13;