AngularJS study notes ng-options directive_AngularJS
1. Basic drop-down effect (lable for value in array)
The ng-model attribute in the select tag must be present, and its value is the selected object or attribute value.
<div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="o.id for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect",['$scope',function($sc){ $sc.selected = ''; $sc.optData = [{ id: 10001, MainCategory: '男', ProductName: '水洗T恤', ProductColor: '白' },{ id: 10002, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' },{ id: 10003, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' }]; }]);
2. Customize the drop-down display name (label for value in array)
label can be spliced into different strings as needed
<div ng-controller="ngselect2"> <p>usage:label for value in array(label可以根据需求拼接出不同的字符串)</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect2",['$scope',function($sc){ $sc.selected = ''; $sc.optData = [{ id: 10001, MainCategory: '男', ProductName: '水洗T恤', ProductColor: '白' },{ id: 10002, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' },{ id: 10003, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' }]; }]);
3.ng-options option grouping
group by group item
<div ng-controller="ngselect3"> <p>usage:label group by groupName for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="(o.ProductColor+'-'+o.ProductName) group by o.MainCategory for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect3",['$scope',function($sc){ $sc.selected = ''; $sc.optData = [{ id: 10001, MainCategory: '男', ProductName: '水洗T恤', ProductColor: '白' },{ id: 10002, MainCategory: '女', ProductName: '圓領长袖', ProductColor: '黃' },{ id: 10003, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' }]; }]);
4.ng-options Customize ngModel binding
The selected value below is the id effect of optData http://sandbox.runjs.cn/show/nhi8ubrb
<div ng-controller="ngselect4"> <p>usage:select as label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-options="o.id as o.ProductName for o in optData"> <option value="">-- 请选择 --</option> </select> </div> m1.controller("ngselect4",['$scope',function($sc){ $sc.selected = ''; $sc.optData = [{ id: 10001, MainCategory: '男', ProductName: '水洗T恤', ProductColor: '白' },{ id: 10002, MainCategory: '女', ProductName: '圓領长袖', ProductColor: '黃' },{ id: 10003, MainCategory: '女', ProductName: '圓領短袖', ProductColor: '黃' }]; }]);
Effect:http://runjs.cn/detail/nhi8ubrb
The above is the entire content of this article, I hope you all like it.

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to get items using commands in Terraria? 1. What is the command to give items in Terraria? In the Terraria game, giving command to items is a very practical function. Through this command, players can directly obtain the items they need without having to fight monsters or teleport to a certain location. This can greatly save time, improve the efficiency of the game, and allow players to focus more on exploring and building the world. Overall, this feature makes the gaming experience smoother and more enjoyable. 2. How to use Terraria to give item commands 1. Open the game and enter the game interface. 2. Press the "Enter" key on the keyboard to open the chat window. 3. Enter the command format in the chat window: "/give[player name][item ID][item quantity]".

This article aims to help beginners quickly get started with Vue.js3 and achieve a simple tab switching effect. Vue.js is a popular JavaScript framework that can be used to build reusable components, easily manage the state of your application, and handle user interface interactions. Vue.js3 is the latest version of the framework. Compared with previous versions, it has undergone major changes, but the basic principles have not changed. In this article, we will use Vue.js instructions to implement the tab switching effect, with the purpose of making readers familiar with Vue.js

Mobile devices have become an essential part of people's lives in modern society. Games have also become one of the main forms of entertainment in people's spare time. There are constantly people working on developing new tools and technologies to optimize gameplay and improve the gaming experience. The input method with its own MC command is one of the eye-catching innovations. And how it can bring a better gaming experience to players. This article will delve into the infinite possibilities of the built-in MC command input method. Introduction to the built-in MC command input method. The built-in MC command input method is an innovative tool that combines the functions of MC commands and intelligent input methods. This enables more operations and functions. By installing the input method on a mobile device, players can easily use various commands in the game. Enter commands quickly to improve game efficiency

Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".

In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency

The instructions that the computer can directly execute include operation codes and operands. The opcode refers to the part of the instruction or field specified in the computer program to perform the operation. It is actually the instruction sequence number, which is used to tell the CPU which instruction needs to be executed.

With the continuous development of the Internet, Web applications have become an important part of enterprise information construction and a necessary means of modernization work. In order to make web applications easy to develop, maintain and expand, developers need to choose a technical framework and programming language that suits their development needs. PHP and AngularJS are two very popular web development technologies. They are server-side and client-side solutions respectively. Their combined use can greatly improve the development efficiency and user experience of web applications. Advantages of PHPPHP

Xi Xiaoyao Technology said that the original author | IQ has dropped to the ground. Recently, many teams have re-created based on the user-friendly ChatGPT, and many of them have relatively eye-catching results. The InternChat work emphasizes user-friendliness by interacting with the chatbot in ways beyond language (cursors and gestures) for multimodal tasks. The name of InternChat is also interesting, representing interaction, nonverbal and chatbots, and can be referred to as iChat. Unlike existing interactive systems that rely on pure language, iChat significantly improves the efficiency of communication between users and chatbots by adding pointing instructions. In addition, the author also
