Home Web Front-end JS Tutorial AngularJS study notes ng-options directive_AngularJS

AngularJS study notes ng-options directive_AngularJS

May 16, 2016 pm 03:54 PM
angularjs instruction

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: '黃'
  }];
}]);
Copy after login

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: '黃'
  }];
}]);
Copy after login

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: '黃'
  }];
}]);
Copy after login

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: '黃'
  }];
}]);
Copy after login

Effect:http://runjs.cn/detail/nhi8ubrb

The above is the entire content of this article, I hope you all like it.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to get items using commands in Terraria? -How to collect items in Terraria? How to get items using commands in Terraria? -How to collect items in Terraria? Mar 19, 2024 am 08:13 AM

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 &quot;Enter&quot; key on the keyboard to open the chat window. 3. Enter the command format in the chat window: &quot;/give[player name][item ID][item quantity]&quot;.

VUE3 quick start: using Vue.js instructions to switch tabs VUE3 quick start: using Vue.js instructions to switch tabs Jun 15, 2023 pm 11:45 PM

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

Explore the infinite possibilities of the input method that comes with MC commands (an innovative tool to create a perfect gaming experience - the input method that comes with MC commands) Explore the infinite possibilities of the input method that comes with MC commands (an innovative tool to create a perfect gaming experience - the input method that comes with MC commands) May 02, 2024 pm 03:01 PM

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

The latest 5 angularjs tutorials in 2022, from entry to mastery The latest 5 angularjs tutorials in 2022, from entry to mastery Jun 15, 2017 pm 05:50 PM

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".

Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Jun 27, 2023 pm 07:37 PM

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

What are the two parts of instructions that a computer can directly execute? What are the two parts of instructions that a computer can directly execute? Dec 09, 2020 am 09:15 AM

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.

Build web applications using PHP and AngularJS Build web applications using PHP and AngularJS May 27, 2023 pm 08:10 PM

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

Prompt is no longer needed. You can play the multi-modal dialogue system with just your hands. iChat is here! Prompt is no longer needed. You can play the multi-modal dialogue system with just your hands. iChat is here! May 15, 2023 pm 05:55 PM

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

See all articles