标签: angular-ngmodel

如何检索NgModelGroup嵌套在 中的的验证状态NgFor？

如果我没有NgFor，我可以将组分配给这样的模板变量：

<p *ngIf="addressCtrl.invalid">Address is invalid.</p>

<div ngModelGroup="address" #addressCtrl="ngModelGroup">
    <input name="city"  [ngModel]="address.city"  required>
    <input name="state" [ngModel]="address.state" required>
    <input name="zip"   [ngModel]="address.zip"   required>
</div>

但相反，我想要这样的东西：

<p *ngIf="addressCtrl.invalid">Address # {{index}} is invalid.</p>

<div *ngFor="let address of addresses">
    <div ngModelGroup="address" #addressCtrl="ngModelGroup">
        <input name="city"  [ngModel]="address.city"  required>
        <input name="state" [ngModel]="address.state" required>
        <input name="zip"   [ngModel]="address.zip"   required>
    </div>
</div

问题是我得到的addressCtrl是未定义的。

这是我创建的一个 plunker 来测试这个：https ://plnkr.co/edit/RXi2T52kynsWLr4fDMVa?p=preview

下图显示了我的表格，其中数据是动态设置的。例如，它可以有 2,3,4 ... 列。

我的 html 代码如下：<thead>包含标题值，并tbody包含可以修改的值。

<table class="table-conf">
    <thead>
       <tr>
           <th *ngFor="let data of jsonText[0]" style="text-align: center;">{{data}}</th>
       </tr>
    </thead>
    <tbody>
       <tr *ngFor="let data of jsonText; let i=index">
         <ng-container *ngIf="i!=0">
             <td class="padding-table" *ngFor="let dt of data; let j=index">
                 <input style="text-align: center;" [(ngModel)]="jsonText[i][j]">
             </td>
         </ng-container>
       </tr>
    </tbody>
</table>

以下是jsonText我迭代的变量示例：

jsonText Array(6)
     0: (2) ["Task", "Hours per Day"]
     1: (2) ["Work", 11]
     2: (2) ["Eat", 2]
     3: (2) ["Commute", 2]
     4: (2) ["Watch TV", 2]
     5: …

我已经建立了这个表格：

这是html代码：

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

这是相关的打字稿代码：

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', …

我有以下 HTML 模板

<input type="text" [(ngModel)]="mobile" (change)="mobileChanged()">

这是我的 .ts

mobileChanged = () => {
    console.log(this.mobile);
};

在同一个元素中拥有ngModel和是错误的change吗？在我的情况下，mobileChanged当我输入输入时没有被调用。但是，当我检查 的值时mobile，它会正确更新。

这是 Angular 7。

我试图在Angular javascript(简化代码)中做这样的事情:

var modelName = "date";

if (attrs.hasOwnProperty('today')) {
   scope.modelName = new Date();
}

在上面,我实际上想要自动scope.modelName成为scope.date.如何将modelName变量解析为其值？

我有这个代码和信息:

$scope.options = [
  { id: 1, label: "My label" },
  { id: 2, label: "My label 2" }
];
$scope.selected = 2;

<select ng-options="opt.label for opt in options" ng-model="selected">
  <option value="">Select one</option>
</select>

但是,选项创建如下:

<select ng-options="opt.label for opt in options" ng-model="selected">
  <option value="">Select one</option>
  <option value="0">My label</option>
  <option value="1">My label 2</option>
</select>

如何将所选选项设置为我的标签2？我知道可以做到:

$scope.selected = $scope.options[1];

但我的问题是选项是在一个指令中创建的,那时我不知道1)有多少个值$scope.options,也不知道2)数据库中所选选项的索引是什么.我唯一知道的是id(在对象中).

我的指令的html是这样的:

<select ng-switch-when="select" ng-model="form.model[element.model]" ng-options="{{element.rule}}"></select>

在哪里element.rule:

rule: "role.role for role in element.options"

并且element.options具有选项的数组,并且form.model[element.model]具有所选选项的id.

如何在数组中获取ID为X的元素的索引 …

我正在构建一个离子应用程序,我有一个问题,阅读a的价值ng-model.

HTML:

<select id="objetivos"  
        class="form-control col-xs-12 col-sm-12 col-lg-12" 
        ng-model="objetivosSelec" 
        ng-options="objetivo.value for objetivo in objetivos | filter: filtroServicio | orderBy: 'value' | unique: 'value'" 
        ng-change="">
    <option value=""></option>
</select>

控制器:

.controller('TecnicasCtrl', function($scope, Tecnicas, Servicios,Objetivos,Indicaciones,Contraindicaciones) {
    ...  
    $scope.limpiarFiltro = function() {
        alert($scope.objetivosSelec);
    }  
    ...
})

我只想在警报上显示所选的选择值但不显示任何内容.如果我添加,.val()则会出现JavaScript错误:

*Error: $scope.objetivosSelec is undefined*

我正在阅读Angular和Ionic doc,一切似乎都没问题.

有谁知道我做错了什么？

我正在尝试ng-model-options通过绑定来设置它.但是,当它在控制器中设置时似乎不起作用.

例如:

这有效,但我不想传递一个字符串

input.current-page(type='text' ng-model='pageNumber.value' ng-model-options='{getterSetter: true}')

我的尝试:

这回来了 Cannot read property 'updateOn' of undefined

link: function(scope) {
  scope.modelOpts = { getterSetter: true }
})

// view
input.current-page(type='text' ng-model='pageNumber.value' ng-model-options='modelOpts')

嗨，我正在处理指令，我需要在其中编辑 DOM 添加 ng-src 属性和模型。

这是我的 DOM

     <edit-component>
      <img src="images/logo.png" title="Hearty Wear" />
    </edit-component>

我需要结果 DOM

       `<div>
         <img src="images/logo.png" title="Hearty Wear" ng-src={{myModel}} />
       </div> `

这样当我用数据更新 myModel 时，图像应该更新

更新

sam.directive('editComponent', function() { return { restrict: 'EA', transclude: true, replace: true, templateUrl: "imageTemplate.html", link: function(scope, element, attb, ctrl, transclude) { scope.data = function() { var imagedata; imagedata = arguments[5]; scope.imageModel = imagedata.base64; return element.find('img').attr('src', "data:image/png;base64," + imagedata.base64); }; } }; });

我还需要先前的src属性值来显示现有图像。

现在我正在手动更新src属性。我需要可以通过模型变量更新的解决方案

谢谢

我有一个"格式"对象,其中包含"datamapping"对象列表.我的datamapping对象包含这些字段(但我们只关注concatenation):

dataMapping.column = null;
dataMapping.datatype = null;
dataMapping.dataMapping = null;
dataMapping.mappingName = "Mapping " + (format.datamappings.length+1);
dataMapping.hasConcatenation = true;
dataMapping.concatenation = ["", ""];

<div style="margin: 1px 0px" ng-repeat="mapping in format.datamappings track by $index"> <!-- using a class for css is not working (even if it has !important), dont know why-->
				<hr width="50" align="left">
				{{mapping.mappingName}}
				<div style="margin-left: 13px"> <!-- using a class for css is not working (even if it has !important), dont know why-->
					Column
					<input class="form-control inline …

我有一个项目，其中包含几个问题，我希望默认出现第一个问题。

我已经看到了如何使用索引来实现此目的的示例，其类型为：

<select>\n <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">\n  {{answer.name}}\n </option> \n</select>\n

它有效，但是当我想将选择绑定到组件的属性时，它不再被选择：

<select  [(ngModel)]=searchterms.answerId>\n <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selected]="i == 2">\n  {\xe2\x80\x8c{answer.name}}\n </option> \n</select>\n

您可以在此处查看示例：

https://stackblitz.com/edit/angular-rv9vqi

正如一些答案中所说，解决方案是为 serachterm 设置默认值，但我遇到的问题（我无法在操场上重现它）是我从要求返回的服务收到这些答案，当组件构建完成后，它仍然没有它们，它给了我一个错误....一旦它们存在于服务中，我怎样才能让它为这些搜索词分配值？

我创建了一个动态文本框，ngFor其中通过在另一个文本框中键入数字来生成文本框的数量。

HTML。

    <div class="input-group col-sm-3">
        <span class="input-group-addon">Num of columns: </span>
        <input class="form-control"
               (change)="addColumnLength($event.target.value)"
               [(ngModel)]="workModel.columnLength"
               placeholder="Enter num of columns">
    </div>
</div>
<div class="column-content col-sm-3">
    <div class="input-group col-sm-12" *ngFor="let column of workModel.columnData; let i= index ">
        <span class="input-group-addon">Column {{i + 1}} </span>
        <input class="form-control"
               [value]="workModel.columnData[i]"
               (change)="assignColumnData($event.target.value, i)">
    </div>
</div>

这是我的 .ts 文件。

 addColumnLength( length : number ) {
    this.workModel.columnData = [];
    for ( let i = 0; i < length; i++ ) {
        this.workModel.columnData[i] =  undefined;
    }
}

assignColumnData( length …