AngularJS Selecione (selecione a caixa)
O AngularJS pode usar matrizes ou objetos para criar uma opção de lista suspensa.
Use NG-Options para criar uma caixa de seleção
No AngularJS, podemos usar a diretiva de opção NG para criar uma lista suspensa, e os itens da lista são loop de saída através de objetos e matrizes, conforme mostrado no exemplo a seguir:
Exemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-CONTROLLER = "myctrl"> <selecione ng-model = "SelectedName" ng-options = "x para x em nomes"> </select> </div> <cript> var app = angular.module ('myApp', []); app.controller ('myctrlLel', scope ($ scope) {[]; "Taobao"];}); </script> <p> Este exemplo demonstra o uso da diretiva NG-Octions. </p> </body> </html>Resultados em execução:
Este exemplo demonstra o uso da diretiva de opções NG.
NG-OPTIONS E NG-REPET
Também podemos usar a diretiva NG-REPEAT para criar uma lista suspensa:
Exemplo
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <leclect> <opção ng-repeat = "X em nomes"> {{x}} </pption> </leclect> </div> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', funcionou ($ scop) ($ scren ($ scroller) ('myApn), scrolle (' script) ('myApn), scrolle (' script), scroller (myctrlUle ('myApp', []); app.Controller ('myctrl', scoppes ($ scop) (myApp ', []; "Taobao"];}); </script> <p> Este exemplo demonstra o uso da diretiva NG-REPEAT para criar uma lista suspensa. </p> </body> </html>Resultados em execução:
Este exemplo demonstra o uso da diretiva NG-REPEAT para criar uma lista suspensa.
A Diretiva NG-REPEAT usa uma matriz para fazer o código HTML para criar listas suspensas, mas a diretiva NG-OPTIONS é mais adequada para criar listas suspensas e tem as seguintes vantagens:
Um objeto usando a opção NG-OPTIONS, NG-REPEAT é uma string.
Qual deve ser melhor?
Suponha que usemos o seguinte objeto:
$scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site : "Taobao", url : "http://www.taobao.com"}];NG-REPEAT tem limitações e o valor selecionado é uma string:
Exemplo
Use ng-repeat:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <p> Selecione um site: </p> <selecione ng-model = "SelectedSite"> <opção ng-repeat = "x sites" value = "{{x.url}}"> {{x.site}}}} <//select> <htl}} "> {x.site}}}} {{selectedSite}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {site: "Taobao", url: "http://www.taobao.com"}];}); </script> <p> Este exemplo demonstra o uso do NG-REPEAT para criar uma lista suspensa, e o valor seleto. </p> </body> </html>Efeito de corrida:
Selecione um site:
Sua escolha é: http://www.google.com
Este exemplo demonstra o uso da diretiva NG-REPEAT para criar uma lista suspensa, com o valor selecionado sendo uma string.
Usando a diretiva NG-OPTIONS, o valor selecionado é um objeto:
Exemplo
Use ng-opções:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <p> Selecione um site: </p> <selecione ng-model = "SelectedSite" ng-options = "x.site para x em sites"> </select> <h1> você escolheu: {{selectedsite.site}}} </h1> {{Selectedsite.url}} </p> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.sites = [{site: "Google", Url: "http./" : "http://www.runoob.com"}, {site: "Taobao", url: "http://www.taobao.com"}];}); </script> <p> Este exemplo demonstra o uso do diretivo de Ng-Otions para criar uma lista suspensa. </p> </body> </html>Efeito de corrida:
Selecione um site:
Você escolheu: Google
O URL é: http://www.google.com
Este exemplo demonstra o uso da diretiva de opções NG para criar uma lista suspensa, com o valor selecionado sendo um objeto.
Ao selecionar um valor como objeto, podemos obter mais informações e o aplicativo é mais flexível.
Fonte de dados como objeto
No exemplo anterior, usamos matrizes como fonte de dados e, abaixo, usamos objetos de dados como fonte de dados.
$ scope.sites = {site01: "google", site02: "runoob", site03: "taobao"};O NG-Options usa objetos muito diferentes, como segue:
Exemplo
Use um objeto como fonte de dados, x é a chave e y é o valor:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-CONTROLLER = "myctrl"> <p> O site que você selecionou é: </p> <selecione ng-model = "SelectedSite" ng-options = "x para (x, y) em sites"> </select> <h1> o valor que você selecionou é: {{{Setrelectedsite}} </h1> </p> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', function ($ scope) {$ scope.sites = {site01: "google", site02: "runOob", site03: "Taobao"};});Efeito de corrida:
O site selecionado é:
O valor que você selecionou é: Google
Este exemplo demonstra o uso de objetos como uma lista suspensa Criar.
O valor que você selecionou é o valor no par de valores-chave.
O valor também pode ser um objeto no par de valores-chave:
Exemplo
O valor selecionado está no valor do par de valores-chave, que é um objeto:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <p> Selecione um carro: </p> <selecione ng-model = "selectedcar" ng-options = "x for (x, y) em carros"> </leclect> <h1> você escolhe: {{Selectedcar.brand}}} </h1> <h2> Model: {{SelectedCar.model}} </h2> <h3> cor: {{selectedcar.color}} </h3> <p> Observe que o valor selecionado é um objeto. </p> </div> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', function ($ scope) {$ scope.cars = {Car01: {Brand: "ford", model: "mustang", color: "Red"}, Car02: {"Ford", Model: "Mustang", " Car03: {Brand: "Volvo", Model: "XC90", Color: "Black"}}}); </script> </body> </html>Resultados em execução:
Escolha um carro
Você escolhe: Fiat
Modelo: 500
Cor: Branco
Nota: O valor selecionado é um objeto.
Você também pode usar a chave no par de valores-chave em vez de usar o par de valores-chave e usar as propriedades do objeto diretamente:
Exemplo:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> <p> Selecione um carro: </p> <selecione ng-model = "Selectedcar" ng-options = "y.brand para (x, y) em carros"> </leclect> <p> você escolheu: {{selectedcar.brand}} </p> <p> {{SelectedCar.model}} </p> <p> A cor é: {{selectedcar.color}} </p> <p> As opções na lista suspensa também podem ser atributos do objeto. </p> </div> <cript> var app = angular.module ('myApp', []); App.Controller ('myctrl', function ($ scope) {$ scope.cars = {Car01: {Brand: "ford", model: "mustang", color: "Red"}, Car02: {"Ford", Model: "Mustang", " Car03: {Brand: "Volvo", Model: "XC90", Color: "Black"}}}); </script> </body> </html>Resultados em execução:
Escolha um carro:
Sua escolha é: Ford
Modelo: Mustang
Cor é: vermelho
As opções na lista suspensa também podem ser atributos de objetos.
O acima é uma compilação de informações de selecionar AngularJS e continuaremos a adicioná -las posteriormente. Espero que possa ajudar os amigos necessitados.