填充在angularjs中選擇

我無法使用ng-material在angularjs中進行選擇工作。填充在angularjs中選擇

這裏是我的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'; 
    });

而這裏的JSON我從JavaScript得到：

{ 
     "_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/

我可以得到的數據顯示，或傳遞不能使2發生在同一時間。

來源

2016-09-21 r007

你是什麼意思？「我可以得到的數據顯示，或通過」 – Akis

如果我使用一個值而不是一個對象，它完美的作品，就像在提琴中使用provincia.id。問題是當我嘗試使用整個對象（Provincia）。 – r007

這裏的答案：

http://codepen.io/1kohei1/pen/gpXdjQ?editors=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>

如何我的代碼看起來。

來源

2016-09-21 18:45:41 r007

填充在angularjs中選擇

回答

相關問題