首頁 web前端 js教程 AngularJS動態產生div的ID

AngularJS動態產生div的ID

Mar 25, 2017 pm 04:12 PM

1、問題背景

     給定一個陣列對象,裡面是p的id;循環產生p元素,並給id賦值

2、實現源碼實現結果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS动态生成p的ID</title>
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var app = angular.module("idApp",[]);
			app.controller("idCon",function($scope){
				$scope.pIds = [
					{pId:"chartId1"},
					{pId:"chartId2"},
					{pId:"chartId3"},
					{pId:"chartId4"},
					{pId:"chartId5"}
				];
			});
		</script>
	</head>
	<body ng-app="idApp" ng-controller="idCon">
		<p ng-repeat="chart in pIds">
			<p id="{{chart.pId}}">{{chart.pId}}</p>
		</p>
	</body>
</html>
登入後複製

 以上就是AngularJS動態產生p的ID的內容,更多相關內容請關注PHP中文網(www.php.cn)! 相關文章:

AngularJS動態產生div的IDAngularJS實作動態編譯加入dom的方法

AngularJs 動態載入模組與相依

AngularJs 動態載入模組與依賴

AngularJs

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
如何使用 PHP 實作動態生成二維碼功能 如何使用 PHP 實作動態生成二維碼功能 Sep 05, 2023 pm 05:45 PM

如何使用PHP實現動態生成二維碼功能二維碼(QRCode)被廣泛應用於各個領域,它可以儲存大量資訊且易於掃描。在網頁應用程式中,我們經常需要動態產生二維碼,以便提供使用者方便的操作方式。本文將介紹如何使用PHP實作動態產生二維碼的功能。一、安裝和設定PHPQRCode程式庫為了方便產生二維碼,我們可以使用PHPQRCode函式庫。首先,我們需要

如何使用 JavaScript 實作動態生成表格功能? 如何使用 JavaScript 實作動態生成表格功能? Oct 24, 2023 am 10:34 AM

如何使用JavaScript實作動態生成表格功能?在網頁開發中,經常要使用表格來展示資料或建立資料輸入的表單。而使用JavaScript可以實現動態生成表格的功能,這樣可以方便地根據資料的變化來動態更新表格內容。本文將透過具體的程式碼範例,詳細介紹如何使用JavaScript實現動態生成表格的功能。一、HTML結構準備首先,在HTML中準備一個容器

2022年最新5款的angularjs教學從入門到精通 2022年最新5款的angularjs教學從入門到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一個非常有個性的語言. 無論是從程式碼的組織, 還是程式碼的程式設計範式, 或物件導向理論都獨具一格. 而很早就在爭論的Javascript 是不是物件導向語言這個問題, 顯然已有答案. 但是, 即使Javascript 叱吒風雲二十年, 如果想要看懂jQuery, Angularjs, 甚至是React 等流行框架, 觀看《黑馬雲課堂JavaScript 高級框架設計視頻教程》就對了。

利用jQuery產生帶行號的動態表格 利用jQuery產生帶行號的動態表格 Feb 26, 2024 pm 09:39 PM

jQuery技巧:動態產生表格並自動增加行號在web開發中,經常需要動態產生表格來展示資料。同時,為了讓使用者更方便地查看表格內容,我們也經常需要為表格新增行號。本文將介紹如何使用jQuery實作動態產生表格並自動增加行號的技巧。首先,我們需要一個簡單的HTML結構,包含一個按鈕用於觸發動態生成表格的操作,以及一個空的元素用於放置生成的表

如何用PHP和XML實現動態產生的網頁導航選單 如何用PHP和XML實現動態產生的網頁導航選單 Jul 29, 2023 am 09:00 AM

如何用PHP和XML實現動態產生的網頁導航選單概述:在網頁設計和開發中,導航選單是一個非常重要的組成部分,它能夠幫助使用者快速定位到網站的各個頁面並提供方便的導航功能。本文將介紹如何使用PHP和XML來實現動態產生的網頁導覽選單,讓網站的導覽選單更加靈活、易於維護。步驟一:建立XML文件首先,我們需要建立一個XML文件,用於儲存網站的導航選單資料。可以使用任何

如何使用Go語言中的範本函數實作Word文件的動態生成? 如何使用Go語言中的範本函數實作Word文件的動態生成? Jul 31, 2023 pm 09:21 PM

如何使用Go語言中的範本函數實作Word文件的動態生成?隨著資訊化時代的到來,動態產生Word文件成為了企業和個人處理文件的常見需求。而Go語言作為一門高效率、簡潔的程式語言,其內建的範本函數功能可以幫助我們快速實現動態產生Word文件的功能。本文將介紹如何使用Go語言中的範本函數實作Word文件的動態生成,並提供相關的程式碼範例。一、準備工作在開始前,我們需

使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 使用PHP和AngularJS建立響應式網站,提供優質的使用者體驗 Jun 27, 2023 pm 07:37 PM

在現今資訊時代,網站已成為人們獲取資訊和交流的重要工具。一個響應式的網站能夠適應各種設備,為使用者提供優質的體驗,成為了現代網站開發的熱點。本篇文章將介紹如何使用PHP和AngularJS建立響應式網站,進而提供優質的使用者體驗。 PHP介紹PHP是一種開源的伺服器端程式語言,非常適合Web開發。 PHP具有許多優點,如易於學習、跨平台、豐富的工具庫、開發效

Vue框架下,如何實現動態產生的統計圖表 Vue框架下,如何實現動態產生的統計圖表 Aug 18, 2023 pm 07:05 PM

在Vue框架下,如何實現動態產生的統計圖表在現代的Web應用開發中,資料視覺化已成為不可或缺的一部分。而統計圖表則是其中重要的一環。 Vue框架是一種流行的JavaScript框架,它提供了豐富的功能來建立互動性的使用者介面。在Vue框架下,我們可以很方便地實現動態產生的統計圖表。本文將介紹如何使用Vue框架和第三方圖表庫來實現此功能。要實現動態產生的統計圖表

See all articles