How to get a property from JSON in AngularJS with select form

Question

I am stuck AngularJS and JSON. I have view called form.html that allow user can select their province. I created Province JSON file and put in select tag, but when I store mySQL I need a province Id I tried ng-value="province.id" in option tag but doesn't work. How can I get a pid(provinceId) at same time when user select province?

province.JSON

[
    {
    "pid" : 1,
    "name" : "Ontario"
    },
    {
    "pid" : 2,
    "name" : "Québec"
    },
    {
    "pid" : 3,
    "name" : "Nova Scotia"
    },
    {
    "pid" : 4,
    "name" : "New Brunswick"
    },
     ...

form.html

<select name="province" ng-model="user.province" ng-required="true"> 
 <option value="">--- Please select ---</option> 
 <option ng-repeat="province in provinces">{{province.name}}</option>
</select>

controllers.js

$scope.submitForm = function (user) {              
    dataObj = {
        "name": user.name,           //it works and all fine
        "province": user.province,   //it works and all fine
        "telephone": user.telephone, //it works and all fine
        "postalcode": user.postalcode, //it works and all fine
        "salary": user.salary,         //it works and all fine
        "provinceId" : user.pid       // undefine .. 
    }

<option ng-repeat="province in provinces" ng-value="province.pid">{{province.name}}</option> ? — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Sep 26, 2017 at 6:48

Raghav · Accepted Answer · 2017-09-26 07:12:41Z

1

Try this:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.user = {};
    $scope.provinces = [{
                        "pid" : 1,
                        "name" : "Ontario"
                        },
                        {
                        "pid" : 2,
                        "name" : "Québec"
                        },
                        {
                        "pid" : 3,
                        "name" : "Nova Scotia"
                        },
                        {
                        "pid" : 4,
                        "name" : "New Brunswick"
                        }
                      ];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
 <select name="contactCountry" ng-model="user.province" ng-options="item.pid as item.name for item in provinces" ><option value="">Select provinces</option>
 </select> 
 <br>
 <p>Selected Province Id = {{user.province}}</p>
</div>

Hope it helps!!.

edited Sep 26, 2017 at 7:12

answered Sep 26, 2017 at 6:57

Raghav

1,2294 gold badges19 silver badges35 bronze badges

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

2 Comments

Jason Over a year ago

thanks! it works but I need province.name as well to just display how can I get a province name at the same time?

Jason Over a year ago

thanks, It actually worked for me with editing some code I got a concept from you thanks!

Jason · Accepted Answer · 2017-09-26 15:06:35Z

0

when user submit select tag will be as object like {"pid:1", "name":"Ontario"} so I can fetch in my controller

The point is I should make as oject.

html file

 <select name="province" ng-model="user.province" ng-options="item.name for item in provinces" class="form-control input-lg" ng-required="true"> 
    <option value="">Select provinces</option>
 <select>

controllers.js

    myFactory.set(user);                 
    dataObj = {
        "name": user.name, 
        "province": user.province.name,   
        "telephone": user.telephone,
        "postalcode": user.postalcode, 
        "salary": user.salary,
        "pid" : user.province.pid
    }

answered Sep 26, 2017 at 15:06

Jason

232 bronze badges

Collectives™ on Stack Overflow

How to get a property from JSON in AngularJS with select form

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related