AngularJS implements a solution to adding index to ng-Options
The example in this article describes the solution of AngularJS adding index to ng-Options. Share it with everyone for your reference, the details are as follows:
A child in the Angularjs exchange group asked how to add an index $index to Angular select's ng-Options like Angularjs's ng-Repeat.
In fact, for this problem It is said that Angular itself does not provide variables such as $index for use. But that doesn’t mean we don’t have solutions to this problem.
Putting this problem into perspective, all we need is the subscript of the js array, so if we can add a subscript to the object and use an expression as the label of the option, we can solve the problem.
But the first impression reminds me that the js array is originally a key/value object, but the key is the array subscript, so we have the following design:
html:
<pre class="brush:php;toolbar:false">{{ a | json }}
js :
$scope.getDesc1 = function(key, value) {
return (parseInt(key, 10) + 1) + "->" + value.field;
};
But unfortunately, if you use it as a key/value object for JavaScript, the key will be unordered. Therefore, the unordered subscripts appear as follows:
<select ng-model="a" ng-options="l.field as getDesc1(key,value) for (key,value) in t " class="ng-valid ng-dirty"> <option value="0" >1->jw_companyTalent</option> <option value="1" >2->jw_reportgroup</option> <option value="10" >11->jw_ads</option> <option value="11" >12->jw_jobcomment</option> <option value="12" >13->jw_companyInfo</option> .... </select>
So this cannot be solved. Fortunately, the blogger has another trick. ngOptions supports Angularjs filter, so we can add an order field to the data source object to mark the subscript as the serial number. And you can see in an Angular issue from 2 years ago that Angular has fixed the issue, and the option will generate the array in subscript order.
html:
<pre class="brush:php;toolbar:false">{{ b | json }}
js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.t = [{
"field": "jw_companyTalent"
}, {
"field": "jw_reportgroup"
}];
$scope.getDesc = function(l) {
return l.order + "->" + l.field;
};
}).filter("index", [
function() {
return function(array) {
return (array || []).map(function(item, index) {
item.order = index + 1;
return item;
});
};
}
]);
The options are generated in an orderly manner, and finally we can solve it perfectly, so this article will also come to an end. At the end, the runnable demoplnkr ngOptions index is attached;
The above is the solution of AngularJS adding index to ng-Options. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
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
1662
14
1419
52
1312
25
1262
29
1235
24
What file is index.html?
Feb 19, 2024 pm 01:36 PM
index.html represents the home page file of the web page and is the default page of the website. When a user visits a website, the index.html page is usually loaded first. HTML (HypertextMarkupLanguage) is a markup language used to create web pages, and index.html is also an HTML file. It contains the structure and content of a web page, as well as tags and elements used for formatting and layout. Here is an example index.html code: <
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
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
PHP source code running problem: index error solution
Mar 09, 2024 pm 09:24 PM
PHP source code running problem: Index error resolution requires specific code examples. PHP is a widely used server-side scripting language that is often used to develop dynamic websites and web applications. However, sometimes you will encounter various problems when running PHP source code, among which "index error" is a common situation. This article will introduce some common causes and solutions of index errors, and provide specific code examples to help readers better deal with such problems. Problem Description: When running a PHP program
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
what is mysql index
Oct 08, 2023 am 11:47 AM
The index in MySQL means index. It is a data structure used to speed up the query of database tables. The index can be compared to the catalog of a book. It stores the values of specific columns in the table and the corresponding row positions, making the database more efficient. Locate and access data quickly. The function of the index is to improve query efficiency. Without an index, the database needs to scan the entire table row by row to find matching data. This method will be very time-consuming in large tables. With an index, the database can The required data rows are quickly located in the order, which greatly improves the query speed.
Build a single-page web application using Flask and AngularJS
Jun 17, 2023 am 08:49 AM
With the rapid development of Web technology, Single Page Web Application (SinglePage Application, SPA) has become an increasingly popular Web application model. Compared with traditional multi-page web applications, the biggest advantage of SPA is that the user experience is smoother, and the computing pressure on the server is also greatly reduced. In this article, we will introduce how to build a simple SPA using Flask and AngularJS. Flask is a lightweight Py
How to use AngularJS in PHP programming?
Jun 12, 2023 am 09:40 AM
With the popularity of web applications, the front-end framework AngularJS has become increasingly popular. AngularJS is a JavaScript framework developed by Google that helps you build web applications with dynamic web application capabilities. On the other hand, for backend programming, PHP is a very popular programming language. If you are using PHP for server-side programming, then using PHP with AngularJS will bring more dynamic effects to your website.
