在angular的条件下，如何在HTML中给出动态id名称？
在Angular中，可以使用插值表达式或属性绑定来动态设置HTML元素的id名称。
- 使用插值表达式： 在HTML中，可以使用双大括号{{}}将动态的id名称嵌入到元素的属性中。例如：
- 使用插值表达式： 在HTML中，可以使用双大括号{{}}将动态的id名称嵌入到元素的属性中。例如：
- 在组件的类中，定义一个变量dynamicId，并给它赋予一个动态的值。例如：
- 在组件的类中，定义一个变量dynamicId，并给它赋予一个动态的值。例如：
- 这样，当组件渲染时，动态id名称将被替换为myDynamicId。
- 使用属性绑定： 在HTML中，可以使用方括号[]将动态的id名称绑定到元素的属性中。例如：
- 使用属性绑定： 在HTML中，可以使用方括号[]将动态的id名称绑定到元素的属性中。例如：
- 在组件的类中，同样定义一个变量dynamicId，并给它赋予一个动态的值。例如：
- 在组件的类中，同样定义一个变量dynamicId，并给它赋予一个动态的值。例如：
- 这样，当组件渲染时，动态id名称将被替换为myDynamicId。
以上两种方法都可以根据组件中的变量值来动态设置HTML元素的id名称。在实际应用中，可以根据具体的业务需求来确定动态id的命名规则和值。
相关·内容
当使用像*ngIf template这样的结构指令时，它看起来像angular在源代码中插入诊断注释。
1)为什么有用，以后如何使用？
2)这是angular 2在*ngIf中动态添加模板的方式吗？
在使用时
<ng-template [ngIf]="hero">
<div>{{hero.name}}</div>
</ng-template>
Angular在html中插入以下注释。
浏览 0提问于2017-11-23得票数 1
我试图在动态创建的html元素中添加一个单击事件，目前代码如下所示。
let parameterLabels = document.getElementById('parameterLabels');
p_meter.classList.add('active', 'filtered');
parameterLabels.innerHTML += `
<a id="label_${parameter.name}" class="ui label transition animatin
浏览 1提问于2017-03-23得票数 1
回答已采纳
我对angular2的了解有限。通过使用jquery，我们可以很容易地获得属性值。例如在HTML中
<input id="foo" type="text" name="foo">
在jquery中
$(document).ready(
function ()
{
console.log($('#foo').attr('type'));// output foo
});
在angular2中，如果我们使用反应形式，我们将输入字段写成这样：
<input
浏览 5提问于2018-01-16得票数 3
3回答
我能够在index.html中动态地设置概念为角4的标记，但是当我尝试删除tags.its而不是删除时，我如何删除我之前添加的标记？
下面是我尝试过的:设置标记：
import {Meta ,MetaDefinition } from '@angular/platform-browser';
@Component({
selector: 'app-share-video',
templateUrl: './share-video.component.html',
})
export class ShareVideoComponent
浏览 5提问于2017-06-06得票数 12
回答已采纳
下面的文件“工作”(它不会抛出任何错误)：
<!doctype html>
<html ng-app="modx">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<script>
angular.module("modx", [], function($routeProvider) {
});
</script>
</
浏览 34提问于2012-05-08得票数 162
回答已采纳
1回答
我有一个简单的javascript代码，可以动态地将HTML内容添加到div标记中。
function addData(id,title,title_data){
var htmlcode='';
htmlcode+=`<h1> Title: `+title+` </h1> <div ng-app="">
<input ng-model="model`+title+id`" ng-init="model`+title+id+'='+\'
浏览 14提问于2017-09-09得票数 0
我正在制作一个angular网站，其中我需要从服务中检索一堆数据，并将其传递给多个组件。 最初，我的这项服务只是获得了一个 Observable<Itinerary[]>(行程只是我用来收集正确信息的一个模型) 所以我在服务中做了这个。 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Itinerary } from 'src/app/Models/itineary';
im
浏览 18提问于2020-10-22得票数 0
回答已采纳
1回答
我是angular2的新手，通过引用这个，我尝试使用动态表单及其字段生成。我得到了意料之中的表格。
因为动态表单组件使用ng容器一个一个地呈现字段，如下所示
<ng-container
*ngFor="let field of config;"
dynamicField
[config]="field"
[group]="form">
</ng-container>
我使用的表单模板如下所示
<dynamic-form
[co
浏览 4提问于2017-07-14得票数 1
回答已采纳
我有一个像这样的主页：
index.html
<div id="ajaxContent"></div>
<button onclick="callAjax()">Click</button>
<script>
function callAjax() {
$.ajax({
type: "POST",
url: "angular.html",
data: data,
浏览 2提问于2016-03-22得票数 0
我有一个AngularJS服务，在该服务中，我编写了按钮单击功能的逻辑--设置超时3秒，以在单击按钮后显示弹出。
当我看到控制台中的输出时，$timeout运行良好。我不能做的是在timeoutFlag条件下在ng-if模板中公开ng-if。
有人能告诉我我在这里错过了什么吗。感谢你的帮助！
服务
angular.module('myApp').service('appService', appService);
appService.$inject = ['$rootScope', '$timeout'];
function
浏览 2提问于2019-02-22得票数 0
回答已采纳
2回答
我张贴一个文件到后端使用iframe，以避免整个页面加载。该操作需要根据用户的选择发布到动态位置。即，根据用户点击什么元素，将给出不同的id，这将改变POST请求的动作的位置。当我在url中硬编码时，它可以工作-例如www.test.com/1，但是当我使用angular动态更改动作url时，它不工作，尽管当我检查元素时我可以看到正确的url，POST请求没有发生。我正在使用angular version 1.2.1。
请看我下面的代码
<iframe id="uploadTrg" name="uploadTrg" height="0" w
浏览 6提问于2016-08-12得票数 0
下面是我的html和angular js代码。
<html>
<head>
<title></title>
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function DemoController($sco
浏览 0提问于2013-06-27得票数 4
回答已采纳
我是Angular JS的新手。我有html页面(audit.html)，其中显示的唯一ids列表的页面右侧。This is my RouteProvider for this page.There是这里提到的htmls的左侧导航栏上的链接。
.config(function( $routeProvider){
$routeProvider
.when( '/home', {
controller: 'homeController',
templateUrl: "templates/ho
浏览 1提问于2016-12-01得票数 0
2回答
我是Angular 6的新手，这就是我的问题。
在组件中：
ngOnInit() {
this.cols = [
{ field: 'col1', header: 'Column 1', filterMatchMode: 'contains' },
{ field: 'col2', header: 'Column 2', filterMatchMode: 'contains' },
浏览 12提问于2018-09-05得票数 0
回答已采纳
我使用的是datalist，它的选项来自动态json。我还在选项中使用值，该值也随下拉列表的选择列表一起提供。如何从选择中删除该值，有没有人可以帮我。下面是代码。 home.component.html <div>
<input type="text" list="codes">
<datalist id="codes">
<option *ngFor="let c of statusdata" [value]="c.id" >{{c.name}}</o
浏览 14提问于2020-01-08得票数 1
这是我的Html。我给出了这样的路
<html>
<head>
<script src="../../Content/Scripts/Script/angular.min.js"></script>
<script src="../../Content/Scripts/Script/Chart.js"></script>
<script src="../../Content/Scripts/Script/angular-charts.m
浏览 2提问于2017-09-14得票数 0
我有一个具有数据的父状态，我希望使用这些数据来生成具有动态URL参数的子状态。目前，我收到了这个错误，“错误:无法从状态‘dash/’解析'authors/view/Baxter‘”。
在我的router.js文件中：
.state('dashboard', {
url: "/auth/dashboard",
templateUrl: 'angular/dashboard.html',
controller: 'DashboardController',
浏览 4提问于2014-05-19得票数 1
回答已采纳
3回答
我正在处理一个角度应用程序，我有一个包含iframe的视图(这个iframe的目的只是显示一个登录表单)。
就像我试图手动提交表单失败一样，我试图记录这个公式以检查我是否真的能够达到它，但我对如何做到这一点感到困惑。
iframe中的表单具有名称属性myForm
<iframe id="myIframe" name="myIframe" src="someUrl.com">
<html>
...
<form name="myForm" class="form&#
浏览 4提问于2015-07-22得票数 1
我有一个对象，它被推入一个作用域变量.但是在显示的时候我需要得到一个文本框的名字..。
密码是，
<li ng-repeat="textbox in textboxes track by $index">
Label For Inputfield:
<input type="text" id="in_{{$index}}" ng-model="$parent.textboxes[$index].Name"/>
<button class="btn btn-sm btn-
浏览 2提问于2015-10-26得票数 0
1回答
我想访问控制器中的动态表单名。这是我的代码：
HTML
<form name="{{myForm}}" novalidate>
<input type="text" ng-model="username" name="username" required/>
<span ng-show="(submit && myForm.username.$error.required)">
<span>Required&l
浏览 5提问于2017-04-22得票数 1
回答已采纳
这是一个angular项目，但在这种情况下，我需要在不使用angular双向绑定的情况下将输入字段值放入控制器中。 问题是我的输入字段是用以下代码动态添加到html中的： $( "#my-input-fields")
.append( "<li style='height:15px;' >" + " Type the id. code here:" +
"<input type='text' ng-model=
浏览 24提问于2019-01-10得票数 1
回答已采纳
我试图弄清楚如何侦听angular2中特定元素上的特定事件。
HTML
<div id="hello-world">
Just a random message
</div>
在javascript中，我将其实现为：
document.getElementById("hello-world").addEventListener("mousewheel", (e) => {
console.info(e);
});
不知道在Angular2中实现这一点的正确方法是什么，希望有人能给出答案。
浏览 3提问于2017-04-19得票数 0
在我的应用程序组件中，我有头、和页脚指令，在中间还有路由器插座来呈现所有其他组件。
App.Component.html:
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
App.Component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
t
浏览 2提问于2017-10-22得票数 1
回答已采纳
我试图跟随为我的子状态创建一个命名视图，并从它的父状态到它的$state.go，但是它没有成功。用于编辑的。
<!DOCTYPE html>
<html ng-app="demo">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/li
浏览 2提问于2017-11-28得票数 0
回答已采纳
我正在使用ComponentFactory在material stepper上动态加载组件，我想隐藏以前的组件并在每个步骤上加载新的组件。 当前代码-目前我的组件正在加载每一步，但它正在销毁以前的组件和加载新的组件，我不想销毁以前的组件。请查看下面我的代码 ComponentLoad方法：- loadComponent(CurrentindexValue: any) {
this.currentAdIndex = CurrentindexValue;
this.currentAdIndex = (this.currentAdIndex) % this.w
浏览 14提问于2019-06-25得票数 0
回答已采纳
1回答
我在angularjs上创建了一个网页，其中我使用了ng资源和ui-路由器模块。
在这个应用程序中，我想要的主要要求是在导航栏中，我已经创建了ng-重复=“”。从数据库中获取用户名。
现在将创建导航条。
与ui-sref=“{username}”一起，现在我已经显示了app.js。
此App.js用于将要加载的视图，它将要求id为{{ username }，因此这里需要为每个get请求动态分配用户名。
var app = angular.module('trendy', ['ngResource']);
app.controller('trendy
浏览 2提问于2015-07-22得票数 0
回答已采纳
我最近开始使用angularjs，我偶然发现了以下代码示例：
// Code goes here
angular.module('Sojharo', [])
.directive('schrollBottom', function () {
return {
scope: {
schrollBottom: "="
},
link: function (scope, element) {
scope.$watchCollection('schrollBottom', functi
浏览 0提问于2017-01-28得票数 0
我正在使用AngularJS路由，并尝试了解如何使用查询字符串(例如，url.com?key=value)。Angular不理解包含同名albums的键值对的路由
angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
['$routeProvider', function($routeProvider) {
$routeProvider.
when('/albums
浏览 0提问于2013-03-01得票数 36
回答已采纳
在OnsenUI中，它说：“与在单独的文件中创建index.html和services.html不同，您还可以在同一个页面中定义页面内容。”
我不喜欢把我的整个应用程序放在一个html文件中，所以我尝试将每个模板放入一个单独的文件中。这是我的文件结构：
www
-index.html
-services.html
-menu.html
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="
浏览 2提问于2015-03-04得票数 3
回答已采纳
在构建我们的angular应用程序之后，我们是否可以在index.html中附加一个脚本文件？
我尝试过的东西：
{
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": { ... },
"configurations": {
"production": {
"fileReplacements": [{
"replace": "
浏览 8提问于2020-10-13得票数 0
1回答
我在我的angular应用中使用了一个动态组件。它工作得很好，但我想更改它使用的html模板，例如，在我的动态component.ts中，我有： @Component({
selector: 'app-dynamic',
template: '<p>Stackoverflow</p>' ,
styleUrls: ['./dynamic.component.css']
}) 那么，在装饰器中，我是否可以使用从其他服务中获得的保存所需html字符串的变量来代替html字符串？像这样： @Component({
浏览 10提问于2019-09-06得票数 0
我想使用lite服务器测试我的移动视图中的角度应用程序。这是我的包裹json：
{
"name": "myapp",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --con
浏览 13提问于2022-05-31得票数 0
1回答
如何从属性中获取数组值？
、、、、
我正在以角6进行应用，并且在动态模式下发送和接收数据时，我需要通过我使用了以下属性传递和检索数组值，
HTML:
<ul class="list-unstyled" id="list" [attr.parent_id]="123">
<li #li class="media p-2 column" *ngFor="let item of items;let i = index;" [attr.items]="item"> {{item.name}} </li&g
浏览 1提问于2018-10-10得票数 0
回答已采纳
我有像这样的元素
<div id = "node-1-@" >
<div class="region">
accessData
</div>
</div>
JavaScript
var data = $("#node-1-@ .region");
console.log(data.html())
这会给出如下错误
Syntax error, unrecognized expression: #node-1-@
浏览 1提问于2017-06-19得票数 0
我有一个Angular2应用程序，并在应用程序的某些部分使用JQuery。示例代码如下：
$(function(){
var id = 'post349';
var data = 'The quick brown fox...';
$('<div><angular-test></angular-test></div>').attr('id',id).addClass('myclass').html(data).appendTo('#
浏览 1提问于2015-10-05得票数 1
我正在使用ng-bootstrap插件和Angular 7来创建一个carousel。下面是HTML： <ngb-carousel *ngIf="images" (slide)="onSlide($event)">
<ng-template ngbSlide *ngFor="let image of images">
<img [src]="image" alt="Random slide">
<div class="carousel-capt
浏览 12提问于2019-02-13得票数 1
回答已采纳
嗨，我正在尝试动态添加css，但它不工作下面是我的代码
angular.module('myApp', [ 'myApp.controllers','myApp.services']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/new', { templateUrl: 'partials/add.html', controller: 'add' ,resolve: {
sty
浏览 0提问于2013-11-13得票数 0
有没有一种方法可以在浏览器中不使用systemjs动态加载器来加载和引导angular2应用程序？我的意思是，我想用<script>标记或jQuery$.loadScript()加载所有js文件，然后在所有脚本加载时引导angular2应用程序。
我正在开发一个应用程序，它将被注入到另一个应用程序中，我必须一次在浏览器中加载我所有的js、html、css。由于服务器安全，将没有动态加载选项。因此，我不能使用systemjs动态加载，我必须加载所有html、css、js一次，一旦加载，我需要在浏览器中引导angular2应用程序。
我浏览了所有其他链接，它们都提供了如何处理系统do动
浏览 2提问于2016-10-04得票数 0
回答已采纳
1回答
我正在使用这样的replace命令
String k = replace ( desc, "<a target=\"_blank\" href=\"http://www.taxmann.com/corporatelaws/fileopencontainer.aspx?Page=RULES&id=35000000000000001648&search=\">", "");
但在这里，我是静态设置的，并给出了正确的输出，但是在我们的HTML id中，值是动态的。这意味着id在Html中的Hr
浏览 1提问于2012-03-27得票数 1
4回答
我有两个数组
$scope.tags = [{ "id": 1, "name": "python" }, { "id": 2, "name": "NodeJs" }, { "id": 3, "name": "git" }]
另一个是
$scope.skillsInterested = [1,2];
想做什么？
如何在$scope.skillsInterested中映射上面的数组并只打印id的名称
我想在第一个数组中打印名称，第二个数组中只打印id的名
浏览 8提问于2016-11-22得票数 2
回答已采纳
1回答
全,
我在一个角度控制器里面有一个形状。但是该表单的名称是从服务器动态生成的(由Django)。有谁知道我如何访问该表单(在交互w/服务器后更改某些项的有效性的意图)。
以下是一些代码：
my_template.html:
<html>
<div ng-app="MyApp">
<div ng-controller="MyController as my_controller">
<form name={{ form.form_name }}
{% for field in for
浏览 4提问于2016-12-08得票数 0
我创建了一个动态表，用于从控制器获取数据，之前我使用jquery ajax加载表内容
success: function (response) {
for (var i = 0; i < List.length; i++) {
var table = '<tr id="' + List[i].Id + '"><td>' + (i + 1) + '</td><td id="name' + i + '">'
浏览 3提问于2017-05-31得票数 0
2回答
在我的应用程序中，一个块动态加载控件。加载动态控件后，使用angular js更新数据。但是angular js使用的是静态放置的控件。但不是使用动态控件。
在这里，我放置了我想要得到的动态代码。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("
浏览 1提问于2015-12-13得票数 1
现在我使用camelcase指令名，如下所示
<code-input:text></code-input:text> (or)
<code-input-text></code-text-input>
我可以像这样使用自定义的目录名和属性，
<code-input:text dirType="text" labelHead="Code" dirName="Code" dirId="code" dirClass="form-control" dirModel
浏览 2提问于2015-09-28得票数 0
回答已采纳
我是new，使用的是类型记录/Angular2 2语言。我正在尝试从一本打字本中开发示例应用程序，但我总是遇到以下错误：
No provider for RuntimeMetadataResolver (ComponentResolver -> RuntimeCompiler -> RuntimeMetadataResolver)
在浏览器控制台中。我认为问题在于packages.json中的组件版本。Angular2是使用npm安装的，所以版本是2.0beta17。
堆栈跟踪：
BaseException@file:///C:/ProgettiWeb/TestAngular/Ch
浏览 4提问于2016-11-24得票数 1
回答已采纳
我正在开发带有角js的asp.net mvc项目。
我正在处理选项卡，并在单击事件后安装相关的部分视图。
我用json的部分视图html发送到主页，但是角码不能在页面上工作。
我能做什么?
html：
<div ng-app="MyAppS">
<div ng-controller="AnaTest">
<button id="btn1" ng-click="btn1Click()">click</button>
</div>
<div id="m
浏览 0提问于2014-12-09得票数 0
回答已采纳
1回答
我使用angular ui在angular js中路由。我有一个像.But这样的url，我想使用别名，并且有像这样的url。在angular ui中可以吗？？
这是我的配置
angular.module('News', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('news', {
url: "/news",
templateUrl:
浏览 2提问于2016-04-10得票数 0
我刚刚开始学习Angular4，我正面临一个我无法解释的问题。
我现在正在尝试构建两个组件：
我的主要组件是chatComponent，它应该显示一个子组件列表msgComponent。
为此，我在msgArray中定义了一个app.chatComponent数组，并通过à*ngFor指令对消息进行迭代。对于每条消息，我想显示一个子组件app.messageComponent。
到目前为止，除了之外，一切都运行良好-- msgArray中的第一条消息从未显示过.
为什么？
这是我的app.module.ts
import { BrowserModule } from '@ang
浏览 4提问于2017-09-14得票数 2
回答已采纳
我是一个非常新的角度，并试图创建一个小应用程序，利用动态路由。我有一个“成员”页面，其中列出了所有当前成员，如果您单击一个特定成员，您将加载另一个用于显示用户详细信息的页面。目前，我只是试图显示“您已单击xxxs配置文件”，但我有困难，如何让点击的用户名显示。
成员构成部分：
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
@Component({
selector: &#
浏览 2提问于2018-05-29得票数 1
回答已采纳
我使用Angular.js来改变背景的身体点击一个按钮。一切看起来都很好，但仍然没有运行程序。
HTML：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body data-ng-app="" data-ng-style="alpha">
<button data-ng-click=&#
浏览 0提问于2016-01-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
