在 angularjs 中填充 select

Question

我无法使用 ng-material.

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

这里是 fiddle。

http://jsfiddle.net/cfcdue3s/

我可以得到数据来显示，或者被传递不能使2同时发生。

Answer 1

答案如下：

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>

我的代码看起来如何。

在 angularjs 中填充 select

Filling select in angularjs

html

javascript

angularjs

angularjs-material