AngularJs Select (выберите поле)
AngularJs может использовать массивы или объекты для создания параметра раскрывающегося списка.
Используйте NG-Options, чтобы создать поле выбора
В AngularJs мы можем использовать директиву NG-OPTION для создания раскрывающегося списка, а элементы списка являются выводимым циклом через объекты и массивы, как показано в следующем примере:
Пример
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <select ng-model = "selectedName" ng-options = "x для x в именах"> </select> </div> <script> var app = angular.module ('myApp', []); App.Controller ('myCtrl', функция ($ scope) {$ racop.name = ['' MyCtrl ', function ($ scope) {$ rafope. "Taobao"];}); </script> <p> Этот пример демонстрирует использование директивы NG-OPTIONS. </p> </body> </html>Результаты работы:
Этот пример демонстрирует использование директивы NG-OPtions.
ng-options и ng-repeat
Мы также можем использовать директиву 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> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <select> <option ng-repeat = "x in names"> {x}} </option> </select> </div> <script> var app = angular.module ('myApp', []); app.controller ('myCtrl', function ($ rapope) {$ rapop. «Taobao»];}); </script> <p> Этот пример демонстрирует использование директивы NG-Repeat для создания раскрывающегося списка. </p> </body> </html>Результаты работы:
Этот пример демонстрирует использование директивы NG-Repeat для создания раскрывающегося списка.
Директива NG-Repeat использует массив для цикла HTML-кода для создания раскрывающихся списков, но директива NG-OPTION
Объект, использующий опцию NG-OPTIONS, NG-Repeat-это строка.
Какой из них должен быть лучше?
Предположим, мы используем следующий объект:
$ scope.sites = [{site: "Google", url: "http://www.google.com"}, {сайт: "runoob", url: "http://www.runoob.com"}, {сайт: "taobao", url: "http://www.taoba.com"?ng-repeat имеет ограничения, а выбранное значение-это строка:
Пример
Используйте 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> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> выберите веб-сайт: </p> <select ng-model = "selectedsite"> <option ng-repeat = "x in sites" value = "{{x.url}}"> {{x.site}} </antuar {{selectedSite}} </h1> </div> <script> var app = angular.module ('myApp', []); "http://www.runoob.com"}, {site: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Этот пример демонстрирует с использованием директивы ng-repeat для создания списка раскрытия, а выбранное значение является строкой. </p> </body> </html>Эффект бега:
Выберите веб -сайт:
Ваш выбор: http://www.google.com
Этот пример демонстрирует использование директивы NG-Repeat для создания раскрывающегося списка, причем выбранное значение является строкой.
Используя директиву NG-Options, выбранное значение является объектом:
Пример
Используйте ng-options:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> Выберите веб-сайт: </p> <select ng-model = "selectedsite" ng-options = "x.site для x in sites"> </select> <h1> Вы выбрали: {{selectedsite.site}} </h1> <p> {{selectedSite.url}} </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = [{site: "url", "http://www.google", {site: "url:" http://www.google. : «http://www.runoob.com»}, {site: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Этот пример демонстрирует объект. </p> </body> </html>Эффект бега:
Выберите веб -сайт:
Вы выбрали: Google
URL: http://www.google.com
Этот пример демонстрирует использование директивы NG-Options для создания раскрывающегося списка, причем выбранное значение является объектом.
При выборе значения в качестве объекта мы можем получить больше информации, и приложение является более гибким.
Источник данных как объект
В предыдущем примере мы использовали массивы в качестве источника данных, а ниже мы использовали объекты данных в качестве источника данных.
$ scope.sites = {site01: "Google", site02: "runoob", site03: "taobao"};NG-Options использует объекты, которые очень разные, следующим образом:
Пример
Используйте объект в качестве источника данных, x - это ключ, а y - значение:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> Выбранный вами веб-сайт: </p> <select ng-model = "selectedsite" ng-options = "x for (x, y) в сайтах"> </select> <h1> выбранное, которое вы выбрали: {{selectedsite}} </h1> </div> <p> this ancement as ancement as as as as as as as as at as as excated as ate as as as excents as ate as at as as excated as ate as as excated as at as as at as as excated as ate as at as as excated. </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = {site01: "Google", site02: "runoob", site03: "taobao"};});Эффект бега:
Выбранный веб -сайт:
Выбранное вами значение: Google
Этот пример демонстрирует использование объектов в качестве раскрывающегося списка Create.
Выбранное вами значение-это значение в паре ключевых значений.
Значение также может быть объектом в паре ключевых значений:
Пример
Выбранное значение находится в значении пары ключевых значений, которая является объектом:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> выберите автомобиль: </p> <select ng-model = "selectedCar" ng-options = "x for (x, y) в автомобилях"> </selet> <h1> Вы выбираете: {{{selectcar.brand}} </h1> <h2> Модель: {{selectcar.model}} </h2> <h3> color: {{selectedCar.color}} </h3> <p> Обратите внимание, что выбранное значение является объектом. </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.cars = {car01: {бренд: "Ford", модель: "Mustang", Color: "red", Car02: {brand: "Fiat", ",", ",", ",", ",", ",", ",", ",", ",". CAR03: {Бренд: "Volvo", Model: "xc90", Color: "Black"}}}); </script> </body> </html>Результаты работы:
Выберите машину
Вы выбираете: Fiat
Модель: 500
Цвет: белый
Примечание: выбранное значение является объектом.
Вы также можете использовать клавишу в паре клавишных значений вместо использования пары клавиш и напрямую использовать свойства объекта:
Пример:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <div ng-pp = "myapp" ng-controller = "myctrl"> <p> выберите автомобиль: </p> <select ng-model = "selectedCar" ng-options = "y.brand for (x, y) в автомобилях"> </select> <p> Вы выбрали: {{selectedCar.brand} </p> <p> Модель: {{selectedCar.model}} </p> <p> Цвет is: {{selectedCar.color}} </p> <p> Параметры в раскрывающемся списке также могут быть атрибутами объекта. </p> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.cars = {car01: {бренд: "Ford", модель: "Mustang", Color: "red", Car02: {brand: "Fiat", ",", ",", ",", ",", ",", ",", ",", ",". CAR03: {Бренд: "Volvo", Model: "xc90", Color: "Black"}}}); </script> </body> </html>Результаты работы:
Выберите машину:
Ваш выбор: Ford
Модель: Мустанг
Цвет: красный
Параметры в раскрывающемся списке также могут быть атрибутами объектов.
Выше приведено сборник AngularJs Select Information, и мы продолжим добавлять ее позже. Я надеюсь, что это может помочь нуждающимся друзьям.