Question

我遇到了AngularJS和JSON。我有一个名为form.html的视图，允许用户选择他们的省份。我创建了省JSON文件并放入了select标签，但是当我存储mySQL时，我需要省ID 我在选项标签中尝试了ng-value =“province.id”但不起作用。当用户选择省时，如何同时获得pid（provinceId）？

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

Answer 1

试试这个：

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>

希望它有所帮助!!

Answer 2

当用户提交select标签时，对象就像{＆＃34; pid：1＆＃34;，＆＃34; name＆＃34;：＆＃34; Ontario＆＃34;}所以我可以获取我的控制器

关键是我应该作为对象。

html文件

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

如何使用选择表单从AngularJS中的JSON获取属性

2 个答案: