在angularjs中填充select
Filling select in angularjs
我在angularjs中使用ng-material时遇到了问题。
这是我的html:
<div layout-gt-sm="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Provincia:</label>
<md-select id="provincia" data-ng-model="vm.solicitud.beneficiario.provincia" aria-label="provincia.provincia"
ng-change="vm.getLocalidadProv(vm.solicitud.beneficiario.provincia); vm.solicitud.beneficiario.localidad = null" ng-required="true">
<md-option ng-repeat="provincia in vm.provincias._embedded.provincia track by provincia.id" ng-value="provincia">
{{provincia.provincia}}
</md-option>
</md-select>
</md-input-container>
<md-input-container class="md-block" flex-gt-sm ng-show="vm.solicitud.beneficiario.provincia">
<label>Localidad:</label>
<md-select id="localidad" data-ng-model="vm.solicitud.beneficiario.localidad.id" aria-label="localidad.localidad" ng-required="true">
<md-option ng-repeat="localidad in vm.localidades._embedded.localidad" ng-value="localidad.id">
{{localidad.localidad}}
</md-option>
</md-select>
</md-input-container>
</div>
这是我的javascript:
ProvinciaService.getProvincias().then(function(data) {
vm.provincias = data;
}, function() {
vm.error = 'unable to get the provincias';
});
这是我从Javascript得到的JSON:
{
"_embedded": {
"provincia": [
{
"id": 1,
"provId": "A",
"provincia": "SALTA",
"fechaCarga": "2016-01-26T03:00:00.000+0000",
"fechaMod": "2016-01-26T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/1"
},
"provincia": {
"href": "http://localhost:8080/provincia/1"
}
}
},
{
"id": 2,
"provId": "B",
"provincia": "BUENOS AIRES",
"fechaCarga": "2016-01-26T03:00:00.000+0000",
"fechaMod": "2016-01-26T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/2"
},
"provincia": {
"href": "http://localhost:8080/provincia/2"
}
}
},
{
"id": 3,
"provId": "C",
"provincia": "CIUDAD AUTONOMA DE BUENOS AIRES",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/3"
},
"provincia": {
"href": "http://localhost:8080/provincia/3"
}
}
},
{
"id": 4,
"provId": "D",
"provincia": "SAN LUIS",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/4"
},
"provincia": {
"href": "http://localhost:8080/provincia/4"
}
}
},
{
"id": 5,
"provId": "E",
"provincia": "ENTRE RIOS",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/5"
},
"provincia": {
"href": "http://localhost:8080/provincia/5"
}
}
},
{
"id": 6,
"provId": "F",
"provincia": "LA RIOJA",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/6"
},
"provincia": {
"href": "http://localhost:8080/provincia/6"
}
}
},
{
"id": 7,
"provId": "G",
"provincia": "SANTIAGO DEL ESTERO",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/7"
},
"provincia": {
"href": "http://localhost:8080/provincia/7"
}
}
},
{
"id": 8,
"provId": "H",
"provincia": "CHACO",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/8"
},
"provincia": {
"href": "http://localhost:8080/provincia/8"
}
}
},
{
"id": 9,
"provId": "J",
"provincia": "SAN JUAN",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/9"
},
"provincia": {
"href": "http://localhost:8080/provincia/9"
}
}
},
{
"id": 10,
"provId": "K",
"provincia": "CATAMARCA",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/10"
},
"provincia": {
"href": "http://localhost:8080/provincia/10"
}
}
},
{
"id": 11,
"provId": "L",
"provincia": "LA PAMPA",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/11"
},
"provincia": {
"href": "http://localhost:8080/provincia/11"
}
}
},
{
"id": 12,
"provId": "M",
"provincia": "MENDOZA",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/12"
},
"provincia": {
"href": "http://localhost:8080/provincia/12"
}
}
},
{
"id": 13,
"provId": "N",
"provincia": "MISIONES",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/13"
},
"provincia": {
"href": "http://localhost:8080/provincia/13"
}
}
},
{
"id": 14,
"provId": "P",
"provincia": "FORMOSA",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/14"
},
"provincia": {
"href": "http://localhost:8080/provincia/14"
}
}
},
{
"id": 15,
"provId": "Q",
"provincia": "NEUQUEN",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/15"
},
"provincia": {
"href": "http://localhost:8080/provincia/15"
}
}
},
{
"id": 16,
"provId": "R",
"provincia": "RIO NEGRO",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/16"
},
"provincia": {
"href": "http://localhost:8080/provincia/16"
}
}
},
{
"id": 17,
"provId": "S",
"provincia": "SANTA FE",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/17"
},
"provincia": {
"href": "http://localhost:8080/provincia/17"
}
}
},
{
"id": 18,
"provId": "T",
"provincia": "TUCUMAN",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/18"
},
"provincia": {
"href": "http://localhost:8080/provincia/18"
}
}
},
{
"id": 19,
"provId": "U",
"provincia": "CHUBUT",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/19"
},
"provincia": {
"href": "http://localhost:8080/provincia/19"
}
}
},
{
"id": 20,
"provId": "V",
"provincia": "TIERRA DEL FUEGO",
"fechaCarga": "2016-05-31T03:00:00.000+0000",
"fechaMod": "2016-05-31T03:00:00.000+0000",
"vigencia": true,
"usuarioCarga": "r007",
"usuarioMod": "r007",
"_links": {
"self": {
"href": "http://localhost:8080/provincia/20"
},
"provincia": {
"href": "http://localhost:8080/provincia/20"
}
}
}
]
},
"_links": {
"first": {
"href": "http://localhost:8080/provincia?page=0&size=20"
},
"self": {
"href": "http://localhost:8080/provincia"
},
"next": {
"href": "http://localhost:8080/provincia?page=1&size=20"
},
"last": {
"href": "http://localhost:8080/provincia?page=1&size=20"
},
"profile": {
"href": "http://localhost:8080/profile/provincia"
},
"search": {
"href": "http://localhost:8080/provincia/search"
}
},
"page": {
"size": 20,
"totalElements": 24,
"totalPages": 2,
"number": 0
}
}
还有一把小提琴。
http://jsfiddle.net/cfcdue3s/我可以得到的数据显示，或通过不能使两者同时发生
答案如下:
http://codepen.io/1kohei1/pen/gpXdjQ?编辑= 101
<md-input-container class="md-block" flex-gt-sm>
<label>Provincia:</label>
<md-select id="provincia" data-ng-model="vm.solicitud.beneficiario.provincia" ng-model-options="{trackBy: '$value.id'}" aria-label="provincia.provincia"
ng-change="vm.getLocalidadProv(vm.solicitud.beneficiario.provincia); vm.solicitud.beneficiario.localidad = null" ng-required="true">
<md-option ng-value="provincia" ng-repeat="provincia in vm.provincias._embedded.provincia">
{{provincia.provincia}}
</md-option>
</md-select>
</md-input-container>
我的代码看起来如何
相关文章：
- 如何将CSS(特别是填充/边距）应用于select下拉菜单的选项或optgroup
- 由其他Ember Select填充的Ember Select不更新选择绑定
- 在CSS3中的Select Tag(下拉菜单）中向左填充
- 使用jquery解析json以构建动态填充的select
- Angularjs填充表单数据(从其他Select中选择）
- 如何使用CasperJS填充未嵌入表单中的select元素
- AngularJS-jquery插件SelectBoxIt在ng个选项完成填充select之后
- 使用split(）从select下拉列表中填充文本字段值
- 用 javascript 数组填充 struts2 select 标签
- 尝试使用 JQUERY 使用 JSON 数据填充 Select
- Javascript使用数组填充select选项
- 使用OptGroup从两个分离的JSon对象JQuery填充Select
- 动态填充select标记无效
- 用SELECT值填充SPAN
- 如何使用ajax在select下拉列表中填充json数据
- 用多个列表填充jquery select下拉表单
- 用JSON值填充select
- jQuery加载未填充select元素
- 如何在承诺后用angular ui-select填充选项
- 基于select填充表
