angular 10 ng-选择get value from DOM
Angular 10是一种流行的前端开发框架，它基于TypeScript构建，并且由Google维护和支持。它提供了一种结构化的方法来构建Web应用程序，并且具有许多强大的功能和工具。
ng-选择是Angular中的一个指令，用于从DOM中获取值。它通常与表单元素一起使用，例如下拉列表、单选按钮或复选框。通过使用ng-选择指令，我们可以轻松地获取用户在表单元素中所做的选择。
以下是使用ng-选择指令从DOM中获取值的步骤：
- 在Angular组件的HTML模板中，将ng-选择指令应用于表单元素。例如，如果我们有一个下拉列表，可以这样使用：
<select [(ngModel)]="selectedValue">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>- 在组件的TypeScript代码中，定义一个变量来存储用户选择的值。在上面的例子中，我们使用了
selectedValue变量。
selectedValue: string;- 现在，当用户在下拉列表中进行选择时，
selectedValue变量将自动更新为所选项的值。
通过这种方式，我们可以轻松地从DOM中获取用户的选择值，并在Angular应用程序中进行进一步处理。
对于Angular开发，腾讯云提供了一系列相关产品和服务，例如：
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，用于托管和运行Angular应用程序。
- 腾讯云对象存储（COS）：用于存储和管理应用程序中的静态资源，如图像、音频和视频文件。
- 腾讯云云数据库MySQL版（CMYSQL）：提供可靠的关系型数据库服务，用于存储和管理应用程序的数据。
- 腾讯云CDN加速（CDN）：加速静态资源的传输，提高应用程序的加载速度和性能。
- 腾讯云人工智能（AI）：提供各种人工智能服务和工具，用于开发智能化的应用程序。
这些产品和服务可以帮助开发人员在腾讯云上构建、部署和扩展Angular应用程序，并提供安全、高性能的解决方案。
相关·内容
使用component test harness，我们应该基于PageObject结构开发我们的测试，该结构提供了我们应该知道的关于该元素的所有信息。 我有一个测试，我需要检查输入是否脏。使用Component Harness的正确方法是什么？我知道我可以访问元素并获取类，但它看起来并不正确。有没有ReactiveFormHarness？ 组件： import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
@Component({
sel
浏览 13提问于2021-04-23得票数 0
1回答
尝试使用NG2-自动完成如下:-
我不断地得到不同的错误，每次我尝试在堆栈溢出或github上找到的解决方案时，我都会得到更多的错误。请帮我解决这个问题，我对角度很陌生，我有可能做了一些根本错误的事情。
我看到当前的错误：
Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasource' since it isn't a known property of 'ng2-completer'.
app.component.ts
import { Compon
浏览 0提问于2017-08-02得票数 0
1回答
我编写了一个名为lobInclude的指令，我想要和ngInclude一样，但是没有作用域：
.directive("lobInclude", ["$templateRequest", "$compile", function($templateRequest, $compile) {
return {
restrict: "A",
scope: false,
compile: function() {
r
浏览 2提问于2015-07-09得票数 0
回答已采纳
2回答
我试图使用ngStyle指令将自定义样式应用于ng模板，我想要制作一个Slider，它显示使用Swiper的电影信息，如果我删除Slider的ngStyle指令，Slider才能工作，只有当我添加Slider指令时，Slider才能工作。
slider.component.html：
<swiper [config]="swiperConfig">
<ng-template
swiperSlide
*ngFor="let movie of movieList | slice:0:10"
浏览 1提问于2022-02-05得票数 0
回答已采纳
1回答
我正在开发一个更大的应用程序，我们正在使用延迟加载模块。加载模块之后，在某些情况下，组件会被呈现到<ng-container><ng-container>中。问题是，在容器上定义的动画没有被调用。
我创建了一个虚拟的stackblitz示例来演示我的意思：
app.component.html:
<ng-container *ngIf="visible" [@myAnimation]>
<hello [ngStyle]="{'top': '50px'}" name="not
浏览 1提问于2019-09-12得票数 3
我正在使用后端的firebase在Angular5中制作一个表单用于我的学习目的。我的双向绑定不起作用。它在控制台上给我下面的错误。
TypeError: Cannot read property 'title' of null
这是我的模板：
<form #f="ngForm" (ngSubmit)="save(f.value)">
<div class="form-group">
<label for="title">T
浏览 0提问于2018-05-13得票数 0
我的应用程序中有以下代码：
$scope.appendBets = function()
{
$.each($scope.phaseBets, function(i, bet)
{
var betElement = angular.element('<div ng-model="phaseBets[i]">Bet id: {{phaseBets[i].id}}</div>');
angular.element(document.querySelector('#betsHolder&#
浏览 6提问于2014-06-19得票数 3
回答已采纳
1回答
我想向来自HomeController的用户展示一下“注销”按钮。我尝试使用指令，但它只显示按钮，没有else....Here是我的代码。
这是指令
(function () {
'use strict';
angular.module('chatApp').directive('userDirective', function () {
return {
restrict: 'E',
scope: {
userList
浏览 2提问于2015-09-16得票数 0
回答已采纳
1回答
使用angular-cli创建了一个angular项目
我正在使用修改选择框。从rest服务器获取数据。
that is my basic data
[
{
"name": "New York",
"id": "108779345385"
},
{
"name": "London",
"id": "104207537613"
},
{
"na
浏览 1提问于2017-08-24得票数 0
在角2分量中，我有authbox.component.ts
import {Component} from 'angular2/core';
import {COMMON_DIRECTIVES} from 'angular2/common';
import {Credentials} from './credentials'
@Component({
selector: 'authbox',
template: `<div>
<div class="login-panel&#
浏览 0提问于2016-03-11得票数 52
回答已采纳
我有一个ng控制器PostsListController来控制加载图像的ng-click。
<div ng-controller='PostsListController'>
<ul id="wookmark_container">
<% @posts.each do |post|%>
<li>
<a href='#' ng-click="open()"> <img src="image_path" >
浏览 3提问于2015-04-02得票数 0
2回答
使用有角度的用户界面。标记包括一个ng-scroll元素，我已经处理了从服务中检索到的数据。我希望在一个ng-repeat中创建一个项目行，这样就可以在ng-scroll中创建一个项目。这在原则上是可行的()，但是AngularJS说我在JSON编码中有问题，需要帮助我找出我做错了什么。
因此，清楚地说，下面的标记和JSON在柱塞中工作，但在应用程序中不起作用。柱塞和下面的JSON是从调试器响应体中提取的。
标记：
<div class="row" >
<div class="col-md-12" >
<div clas
浏览 2提问于2013-12-07得票数 2
回答已采纳
我正在测试一个使用另外两个组件的Component。其他组件在单击按钮时创建。
.html
<div id="homepage-top-div" class="homepage-component-css-grid-container"> ...
<button id="get-question-list-button" [routerLink]="questionListRouterLink" class="btn content-div__button--blue css-g
浏览 1提问于2018-12-17得票数 4
回答已采纳
1回答
我用ng-空闲实现了空闲功能，这很好。我试图用业力/茉莉花来实现测试，但我不能使用我的空闲服务：
UPDATE2
import { Injectable, OnInit, OnDestroy} from '@angular/core';
import { RoutingService } from '../../services/routing/routing.service';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Keepalive }
浏览 7提问于2020-02-26得票数 0
我在窗体的select元素中设置ng更改指令，但当更改值时，不调用链接到它的函数。我一直在阅读非常相似的问题，并应用我看到的答案，到目前为止，还没有一条有效的答案。
你能看到我做错了吗？
我的HTML：
<div class="row" ng-app="quoteApp">
<div class="col-lg-12" ng-controller="QuoteController" ng-init="initialize()">
<h1 class="
浏览 6提问于2016-08-02得票数 0
回答已采纳
我目前正在编写一段代码，该代码显示从json到图表JS的文件。
var app = angular.module('cpu-usage', []);
app.controller('GaugeController', ['$scope', '$http',
function($scope, $http) {
var viewAll = this;
viewAll.gauge = [];
$http.get('dom/json/cpuUsage.json').success(function
浏览 1提问于2014-11-10得票数 0
回答已采纳
1回答
问题
所以我有两个角度分量，一个父母和一个孩子。父组件将一个自定义模板传递给子组件，然后子组件使用ngTemplateOutlet使用自己的数据补充模板。
这在很大程度上运作良好。不幸的是，当试图从子模板访问这个父模板的DOM元素时，我遇到了一些问题。
如果我尝试使用<div #container></div>从默认子模板访问@ViewChild('container',{static: false})，它将获得元素，而不存在任何问题。当我使用app.component传入的自定义模板进行同样的操作时，会得到“无法读取未定义的属性'nativeE
浏览 4提问于2021-02-20得票数 5
我正在构建一个自定义组件，它封装了几个表单字段，并实现了ControlValueAccessor，以便与其父组件中的反应性表单进行交互。我还使用NG_VALIDATORS为自定义表单组件设置验证，基本上遵循本指南：
然后，通过将子窗体包装在带有<div>的*ngIf标记中，打开/关闭子窗体。
我面临的问题是，每次组件显示并隐藏时，验证器函数都会“重新连接”一次。每个先前对验证器函数的引用都会被记住，因此如果要隐藏控件，然后再次显示5次，验证器将在每个更改检测周期中被触发5次，而不仅仅是一次。
如有任何帮助或指导，将不胜感激。
为了演示这个问题，我在验证函数中添加了一个consol
浏览 2提问于2017-03-02得票数 1
回答已采纳
我有这个指令，它利用hostlistener监听ngModelChange来控制输入文本。我打算使用相同的指令来控制在FormGroup/FormControl输入中键入的文本。
指令
import { Directive, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[ngModel][appPureName]
浏览 0提问于2018-07-18得票数 4
回答已采纳
3回答
我正在研究angularjs的应用程序。我的主页上有一个按钮，当用户点击按钮时，它必须点击控制器，从后端获取数据并显示在浏览器上。在chrome和firefox中，一切都很好，但在IE中却不起作用。试图找到另一个解决办法，但如果没有运气，任何建议都会有帮助。
html :登录
spring controller:
@RequestMapping(value = "/getData", method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_VALUE)
public @ResponseBody
浏览 4提问于2017-07-25得票数 0
我有一个select下拉列表，我正在通过Jquery追加到它上面动态添加选项，我想关联下拉列表中的所有数据，我是指所有选择到angular JS模型中的选项。
我正在选择作为
<select multiple='multiple' ng-model="attrId" name='attribute' id='hiddenRemoteChoicePossibleAnswers' ></select>
在几次服务器调用之后，我通过其他一些Jquery动态地添加了这个select选项：
$('#hid
浏览 0提问于2013-05-20得票数 0
回答已采纳
我是这里的新手，但我希望有人能帮忙。
在ng-重复，我想显示的名称，然后在它下面列出每一张专辑标题，然后做同样的事情对第二个名字。但它显示的是名称，然后是它下面的所有专辑。我该怎么把这一切联系起来？
我这里有个柱塞
我有一个像这样的json文件..。
sample.json
{
"artists": [
{
"name": "artist1name",
"albums": [
{
"title": "titlealbum1"
浏览 1提问于2014-07-09得票数 0
回答已采纳
2回答
我正在尝试运行Angular的ui网格，并使用以下代码：
import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import {BosOverviewComponent} from "./bosoverview.component";
import {UiGridModule} from '
浏览 4提问于2017-06-13得票数 3
我是angular-js的新手，我认为这是一个基本的问题，如何从angular-js中的段落标签中获取值？我尝试使用ng- value.Can，但是没有人给我帮助吗？
浏览 1提问于2015-11-28得票数 4
2回答
通过(app.component.ts)，我试图从延迟10秒后显示的服务(mydb.service.ts)获取数据，并通过(aap.component.html)模板显示数据。
mydb.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Restaurant } from './resta
浏览 1提问于2019-04-02得票数 0
回答已采纳
我认为这可能是一个反应形式的错误。我希望有更多经验丰富的专家提供帮助。
症状:无法在给定时间输入超过一个字符。
发生:当输入是FormArray中的FormArray时
我已经包括了一个柱塞链接如下：。
//app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
im
浏览 2提问于2017-06-21得票数 4
回答已采纳
我有以下HTML：
<div ng-controller="entriesCtrl">
<img ng-repeat="entry in entries"
ng-src="{{entry.url}}" id="{{entry.id}}"/>
</div>
在填充模型之后，我尝试从DOM获取图像的大小：
angular.module('foobar', [])
.controller('entriesCtrl', function($sco
浏览 1提问于2015-06-18得票数 1
回答已采纳
1回答
我想要指令来替换标记范围=-3，3到ng-选项。
不幸的是，下面的解决方案不是很好
<html lang="pl">
<head>
<title>Its directive range</title>
</head>
<body>
<div ng-app="app">
<div ng-controller="AppCtrl">
<select ng-model="valu
浏览 2提问于2016-09-18得票数 0
回答已采纳
我正在开发Angular JS应用程序，我想像下面这样选择一个选项。
<select class="form-control" ng-model="rc.status" ng-init="rc.status=1">
<option value="1" selected="selected">Active</option>
<option value="0" selected="">Inactive</option&
浏览 0提问于2016-10-17得票数 0
回答已采纳
新的角度和卡住的标签选择。我正在尝试在angularJS中使用<tabset>和<tab>，并且当我在html中遇到给定的TAB时，尝试在点击ng-click时调用函数。但是，由于某种原因，该方法没有被调用，并且我无法打印我所选择的选项卡。代码如下：
<div class="wrapper wrapper-content animated fadeIn">
<div class="row wrapper border-bottom white-bg page-heading">
<div class=
浏览 0提问于2016-04-06得票数 0
我有下面的angularjs应用程序，它从Instagram加载内容，但是，在页面加载上，我想通过平稳的转换淡出加载的内容。
由于某种原因，ng动画似乎没有触发ng-enter事件。所以我可以添加一个CSS动画。有什么问题吗？
<section ng-controller="ShowImages as images" class="page {{ loadedClass }}" >
<div ng-view>
......
</div>
JS
(function(){
//Place y
浏览 3提问于2015-07-09得票数 0
我有一个angular2项目如下：
package.json:
{
"name": "self-assessment",
"version": "1.0.0",
"scripts": {
"postinstall": "npm run typings install",
"lite": "lite-server",
"gulp": "gulp",
"start"
浏览 5提问于2016-03-02得票数 7
回答已采纳
我使用的是角1，并且尝试在表单提交时设置一个变量，使用ng单击或ng-submit。然后，该变量使用ng-if级联并从DOM中删除表单。但是，我遇到了铬错误消息“表单提交取消了，因为表单没有连接”，并且表单没有发布。
这里有一个完整的MWE：
<html>
<head>
<title>Something</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
&l
浏览 1提问于2017-09-07得票数 2
回答已采纳
我试图将数据从一个组件传递到另一个组件，这些组件使用服务是不相关的。
我正在尝试从这里解决方案。
我的服务类是
import { Subject, Observable } from 'rxjs';
import { Domain } from '../model/domain.model';
import { Project } from '../model/project.model';
import { Injectable } from '@angular/core';
@Injectable()
export clas
浏览 11提问于2019-08-17得票数 0
1回答
ng-导出模块中的引导
、、、
所以我有一个导航条模块，它使用ng引导：
import {NgModule, NgZone} from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavigationComponent} from "./components/navigation/navigation.component";
import {NavMenuComponent} from "./components/nav-menu/nav-menu.component&
浏览 3提问于2018-01-23得票数 0
1回答
在我的角2应用程序中，我使用ngFor循环显示消息。这些消息包含URL。我正在使用一个自定义管道来解析消息并使URL可点击。此外，如果URL是YouTube视频的链接，则将链接转换为嵌入代码。
由于性能原因，我想首先显示视频的缩略图，只有当用户单击缩略图时才切换到嵌入代码。为了做到这一点，而不是让混乱的毛茸茸的混乱，我想给每一个视频它自己的定制组件。我只需输入视频ID，然后一切都可以在组件中处理。
我可以让我的管道返回HTML，但是如果我让它返回一个自定义组件(例如：<youtube-video [videoID]="xxx"></youtube-video&
浏览 1提问于2016-11-23得票数 4
回答已采纳
我在Ionic 5中创建了一个带有多个页面的应用程序，其中使用了幻灯片。我创建了一个服务来存储所有的全局函数，并从每个页面的任何TS文件中调用它们。 当我尝试调用页面中的函数(正在服务中)时，除了包含对幻灯片(离子幻灯片)的引用的函数之外，一切都是正常的。 如果你有什么想法，可以帮我一下吗？如果你想了解更多关于这个问题的细节，请不要犹豫。 提前感谢 service.ts文件 import { Injectable, ViewChild } from '@angular/core';
import { Router } from '@angular/router'
浏览 53提问于2021-10-01得票数 0
1回答
我一直在疯狂地尝试获得angularjs ng--包括如何正确地使用一个烧瓶应用程序，而且似乎不管我尝试了什么，get仍然返回404'd。主页(angular_test.html)加载得很好，但是angular_entry.html没有提供任何内容。
烧瓶：
basedir = c.get('basedir')
app = Blueprint('angulartest', __name__, static_folder=basedir+'/display/static',
template_folder=b
浏览 3提问于2014-06-24得票数 0
回答已采纳
我在我的角度应用程序中创建了一个简单的自定义input组件--使用ControlValueAccessor。因此，当我想创建一个表单input元素时，我不需要调用<input />，只需要调用<my-input>。
我有一个问题，当我使用<input />时，我可以使用myDirective。例如：
<input type="text" class="form-control" formControlName="name" myDirective />
但是，当我使用my-input时，我就不能使用
浏览 5提问于2020-02-19得票数 6
回答已采纳
1回答
使用ng-重复填充我的单选按钮选项的尝试有什么问题？对于使用ng-重复选择和复选框，我没有同样的问题。任何帮助都非常感谢。
"use strict";
angular.module("modalApp", [])
.controller('modalCtrl', function($scope, $filter) {
$scope.membershipTypeData = {
availableOptions: [{
id: '0',
name: 'As
浏览 3提问于2016-03-14得票数 0
回答已采纳
我有一个内部有按钮的div结构。即
<div ng-app="example">
<div class="parent" data-image="1" ng-controller="ParentCtrl">
<div class="child" data-image="2">
<div style="overflow:hidden; margin-right:10px;">
浏览 2提问于2013-11-21得票数 5
回答已采纳
路由
export const SchoolyearsRoutes: RouterConfig = [
{ path: '', terminal: true, redirectTo: '/schoolyears' },
{
path: 'schoolyears', component: SchoolyearsRootComponent, children: [
{ path: '', component: SchoolyearsListComponent },
{ path: 'ed
浏览 3提问于2016-06-30得票数 0
对于表单，逻辑必须加载所有数据，然后在正确加载任务时显示。该表单将显示，然后在几秒钟后将显示。我试过了，但不起作用谢谢
var myInit = function() {
ApplicantId = $location.search()['ID'];
$http({
method: 'GET',
url: 'json/ApplicantSearchList.php?ID=1',
}).then(function(response) {
$scope.National
浏览 0提问于2019-09-06得票数 0
我创建了一个组件BaseInputComponent实现ControlValueAccessor。然后创建一个组件QuickReplyButtonComponent，它扩展到BaseInputComponent组件之上。然后，我将QuickReplyButtonComponent用作AppComponent中的表单控件。但我错了：
下面是相关代码。
错误：
AppComponent.html:4 ERROR Error: StaticInjectorError(AppModule)[InjectionToken NgValueAccessor -> BaseInputComponent]
浏览 0提问于2019-07-08得票数 2
回答已采纳
1回答
我试图制作一个小型搜索引擎，使用角和json对象。我用链式的3个下拉列表对查询进行排序，以便根据所选内容填充它们。结构是这样的:一个json对象包含一个类别数组，每个类别包含一个产品数组，每个产品数组都包含价格、名称等参数，因此当用户选择一个类别时，第二个下拉列表将使用相关产品填充。当用户选择相关产品时，第三个下拉列表将填充此产品的价格。
这是json：
[{
"caregory": "Electronics",
"products": [{
"product": "PC",
浏览 3提问于2015-11-25得票数 1
回答已采纳
2回答
这是我的密码。当我在按钮click.but上动态添加html时，我给出的ng模型不起作用。
有人能解决我的问题吗？
$scope.addParam = function(selected) {
if (selected == "bucket_policy_privacy_status") {
var myElement = angular.element(document.querySelector('#inputParameters'));
myElement.append('<input type="text"
浏览 6提问于2016-11-02得票数 0
回答已采纳
有一个更好的方法来做AngularJS，用更少的代码行我的例子..？这个想法是用AngularJS和jqLite实现100%的效果。
链接示例我的代码解决方案：
HTML:
<div data-ng-controller="Main" data-ng-app>
<select id="yo" data-ng-model="selection" data-ng-change="sample(selection)" required="required">
<option
浏览 2提问于2016-02-24得票数 2
回答已采纳
问题
angular2表单元素的CSS选择器的:not(form)部分是什么？
上下文
当前版本的利用双向数据绑定、更改跟踪和验证来向表单元素添加CSS类。
它们的示例形式如下所示
他们实现红色条的示例代码如下所示
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
浏览 0提问于2017-04-29得票数 4
我在我的项目中使用AngularJs，所以我的应用程序中的所有主要内容都是使用angular的ng-view指令加载的，我想在我的应用程序中使用TimelineJs实现一个时间线，timeline get的一个id (放置时间线的地方)，但我的带有该id的div是通过angular异步加载的，所以当TimelineJs脚本运行div#id不存在时，你知道如何解决这个问题吗？
代码如下：
$(document).ready(function() {
createStoryJS({
type: 'timeline',
width:
浏览 6提问于2013-01-23得票数 0
回答已采纳
我有一个fusionchart图，当用户单击get svg string按钮时，我想从其中获取图像并显示在同一个html页面中。 我从this.chart.getSVGString()获取svg文本，但是如何在dom中呈现它呢？ import { Component } from "@angular/core";
` `import { dataSource } from "./dataSource";
@Component({
selector: "app-root",
templateUrl: ".
浏览 55提问于2021-08-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
