Search code examples
angularjsng-options

how to create a combination of two properties as "name" in ng-options


Normally what we do is

...}}_{{$index}}" ng-options="option.serial_no as option.NameRelation for option in fullFamilydetails" ng-model="obj.ch6a_decl_fam_memb_id">

and on Java I am doing

...
familyDetails.put("NameRelation", Emp_FamilyInfoTemp.getName()+"-"+Emp_FamilyInfoTemp.getRelation());
                            }else{
...

As you see I am handling it on java to show "NAME" - "RELATION" pair as "name of ng-options"

but what I want is to keep NAME and RELATION as different properties in json but show a combination of them while creating ng-options, all and all I want to create the same effect while keeping the properties separate.

Current Sample Json

[{"DOB":"2014-09-03 00:00:00.0","NameRelation":"MaleChildTest-Son","SERIAL_NO":55213,"AGE":"0"},{"DOB":"2014-09-12 00:00:00.0","NameRelation":"FemaleChildTest-Daughter","SERIAL_NO":55216,"AGE":"0"},{"DOB":"2014-09-12 00:00:00.0","NameRelation":"MaleChildTesEmp-Son","SERIAL_NO":55217,"AGE":"0"},{"DOB":"2014-09-12 00:00:00.0","NameRelation":"FemaleChildEmployeeTest-Daughter","SERIAL_NO":55218,"AGE":"0"},{"DOB":"","NameRelation":"Test-Father","SERIAL_NO":55219,"AGE":"0"}]

supposed JSON

[{"DOB":"2014-09-03 00:00:00.0","Name":"MaleChildTest","Relation":"Son","SERIAL_NO":55213,"AGE":"0"}....]

In dropdown I want Name-Relaiton as "name" of options.


Solution

  • DEMO

    <select  ng-options="option.serial_no as label(option.Name, option.Relation)  for option in fullFamilydetails" ng-model="obj"></select>
    

    In your JS:

    angular.module("SO29137733", [])
        .controller("MainCtrl", function ($scope) {
        $scope.fullFamilydetails = [{
            "DOB": "2014-09-03 00:00:00.0",
                "Name": "MaleChildTest",
                "Relation": "Son",
                "SERIAL_NO": 55213,
                "AGE": "0"
        }, {
            "DOB": "2014-09-03 00:00:00.0",
                "Name": "MaleChildTest",
                "Relation": "Son",
                "SERIAL_NO": 55213,
                "AGE": "0"
        }];
        $scope.label = function (name, relation) {
            return name + "-" + relation;
        }
    });
    

    Another option:

    DEMO

    <select>
      <option ng-repeat="option in options" value="{{option.serial_no}}">
        {{option.name + " "+option.relation}}
      </option>
     </select>
    

    In your JS:

    angular.module("SO29137733", []) 
       .controller("MainCtrl", function($scope){
      $scope.options = [{
        serial_no : "123",
        name : "hi",
        relation: "parent"
      },
                       {
        serial_no : "1233",
        name : "sa",
        relation: "sdf"
      }];
    })