标签: angular-ngmodel

我有一个在该视图中使用父作用域的指令.该指令有一个使用隔离范围的子指令.我试图让父指令观察对子指令的ngModel所做的任何更改,并在更改时更新自己的模态.这是一个可能更好解释的jsfiddle:http://jsfiddle.net/Alien_time/CnDKN/

这是代码:

   <div ng-app="app">
        <div ng-controller="MyController">

            <form name="someForm">
                <div this-directive ng-model="theModel"></div>
            </form>

         </div>
    </div>

使用Javascript:

    var app = angular.module('app', []);
app.controller('MyController', function() {

});

app.directive('thisDirective', function($compile, $timeout) {

    return {
        scope: false,

        link: function(scope, element, attrs) {
            var ngModel = attrs.ngModel;
            var htmlText = '<input type="text" ng-model="'+ ngModel + '" />' +
                           '<div child-directive ng-model="'+ ngModel + '"></div>';

            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });

            // Not sure how to watch changes in childDirective's ngModel ???????

        }, // …

在angularJS中,我有一个带有ng-model的输入字段绑定,如果输入不为空则显示一些内容.

<input id="name" type="text" ng-model="typeSignature" placeholder="Type your name here">
<div ng-show="typeSignature==''"> Something</div>

当我按空格键时,布尔值typeSignature==''仍为真.但是,在jQuery中,$('#name').val() == ''如果我按下空格,布尔值将为false.

为什么angularJS处理空间不同？如何使jQuery val()函数与anguLarJS一致,即将空间视为空？

我想'数据绑定'html/jade select的默认值.这是我的选择:

select#title.form-control(ng-model='newClient.title')
    option(ng-repeat='title in titles', ng-selected='$first') {{title}}

这里的问题是,如果我不触摸select,我的newClient.title将被设置为undefined而不是第一个title值.如果不在控制器中设置默认值,我该怎么做？

我对Angular很新,所以我可能会对这一切都做错......

我有一个类似于以下的<select>:

<select ng-model="mySelectedValue">
    <option value="">--</option>
    <option ng-repeat="myValue in someDynamicArrayOfValues" value="{{myValue}}" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(myValue)">{{myValue}}</option>
</select>

这大部分都有效...下拉列表最初会选择正确的选项,如果我更改了所选的选项,那么mySelectedValue将获得新的选择.但是,mySelectedValue不会获得最初选择的选项. mySelectedValue在我更改下拉列表中的值之前一直是空白的.

我查看了ng-init,但似乎在someDynamicArrayOfValues设置之前得到评估...

有没有办法可以mySelectedValue在最初选择的<option>中获得值？

更新:
我忘了提到我还尝试过使用ng-options,但是没有任何运气可以与确定选择了哪个选项一起工作.

我试过这个:

<div ng-show="someDynamicArrayOfValues">
    <select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-selected="myFunctionForDeterminingWhetherValueIsSelected(arrayValue)">
        <option value="">--</option>
    </select>
</div>

还有这个:

<div ng-show="someDynamicArrayOfValues">
    <select ng-model="mySelectedValue" ng-options="arrayValue for arrayValue in someDynamicArrayOfValues" ng-init="myFunctionForSettingSelectedValue()">
        <option value="">--</option>
    </select>
</div>

但无论这些工作,因为选择是建立(和NG-init和NG-选择都得到评估)之前 someDynamicArrayOfValues已经设置的,因此,在<选择>是偶可见.使用时<option ng-repeat="...">,<select>直到设置完后 someDynamicArrayOfValues才会生成/初始化,这就是我一直朝这个方向发展的原因.

有没有办法让ng-options技术工作,同时,选择依赖于someDynamicArrayOfValues(如果ng-options是更好的方法)？

更新2:
这是一个Plunker(从ababashka的答案修改),它更接近我最终想要实现的目标: http://plnkr.co/edit/Kj4xalhI28i5IU0hGBLL？p …

我有两个输入文本框.我需要将输入的值组合在两个文本框中,并在第三个文本框中显示.如果我只value在第三个文本框中使用,我可以显示它.

方框1:

 <input type="text" ng-model="entity.name">

方框2:

 <input type="text" ng-model="entity.code">

方框3:方框1 +方框2

  <input type="text" value="{{entity.name+ ' + ' + entity.code}}">

但是,如果我在第三个框中使用模型名称,则逻辑似乎不起作用:

 <input type="text" value="{{entity.name+ ' + ' + entity.code}}" 
        ng-model="entity.fullCode">

任何人都可以建议修复？

我想将ng-model与外部模型服务一起使用.该模型有两种方法:getValue(变量)和setValue(变量).

所以在我的HTML中,我希望能够做到:

<input type="text" ng-model="balance">

注意:我的控制器中的$ scope上没有定义balance.而且因为我们处理的是4000多个不同的变量,所以我不想在$ scope上定义它们.

然后在更改时,它必须调用模型的setValue()方法.所以在我的控制器中我希望有类似的东西:

$catchAllGetter = function(variable) { // e.g. variable = 'balance'
     var value = Model.getValue(variable);
     return value;
}

$catchAllSetter = function(variable, value) { // called on change
     Model.setValue(variable, value);
}

Angular可以这样吗？

我有一点问题.我想设置脏一个输入,我的意思是,因为当我自动给出一个值时它会保持在pristine类中,不会改变,也不会保存新值.

如果我编辑它,它可以工作并更改类.我想取消那pristine堂课.如果有人知道请告诉我.

<form class="form-horizontal" ng-repeat="studiant in studiants" name="form" id="form">

  <input type="hidden" name="id" value="{{studiant.studiant_id}}" class="form-control" disabled>

  <div class="form-group">
    <label for="school" class="col-md-2 control-label">School</label>
    <div class="col-md-1">
      <input type="text" id="school" name="school" class="form-control" ng-init="studiant.school=studiant.studiant_school" ng-model="studiant.school">
    </div>
  </div>
  <div class="form-group">
    <label for="name" class="col-md-2 control-label">Student's Name</label>
    <div class="col-md-10">
      <input type="text" id="name" name="name" class="form-control" ng-init="studiant.name=studiant.studiant_name" ng-model="studiant.name">
    </div>
  </div>
</form>

和剧本:

document.getElementbyId('name').value = "anything";

或者,如果我做错了,我必须改变value用的ng-model东西,请帮助我.

我有一个输入 ng-model-options="{debounce:250}"

并说我对元素进行了更改并监视该函数.现在,如果我对输入进行简单的测试,例如:

it('test', function(){
  input.val('hello');

  expect(ngChangeSpy).toHaveBeenCalledWith('hello');
})

显然这不起作用.我已经看到你可以等待承诺解决等等,但在这里我只想等待250毫秒才能改变模型.有没有办法实现这个目标？

我正在尝试构建一个动态附加另一个组件的组件.这里的例子是我的父类:

import { Component, ComponentRef, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

@Component({
    templateUrl: './app/sample-component.component.html',
    selector: 'sample-component'
})
export class SampleComponent {

    @ViewChild('dynamicContent', { read: ViewContainerRef })
    protected dynamicComponentTarget: ViewContainerRef;
    private currentComponent: ComponentRef<any>;
    private selectedValue: any;

    constructor(private componentResolver: ComponentFactoryResolver) {

    }

    private appendComponent(componentType: any) {
        var factory = this.componentResolver.resolveComponentFactory(componentType);
        this.currentComponent = this.dynamicComponentTarget.createComponent(factory);
    }
}

sample-component.component.html:

<div #dynamicContent></div>

它可以附加一个元素,但我不知道如何动态绑定双向,就像我在静态组件中一样: [(ngModel)]="selectedValue"

最小的Stackblitz示例

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

在Angular 7 App中，我创建了一个带有<input>字段的简单组件。

当我使用键盘更改输入值时，我希望该值的格式设置为onBlur。-在最小的示例中，我只想向其中添加字符串“ EDIT”。

这基本上是有效的：

• 如果我输入“ test”并模糊该字段，它将更改为“ test EDIT”
• 如果我输入“ lala”并模糊该字段，它将更改为“ lala EDIT”

但是， 当我键入“测试”-模糊（有效）并再次键入“测试”时，它将不再起作用！

该onInputUpdate()功能全被调用（你可以看到它在控制台日志），变量inputValue被更新（你可以看到它的组件{{inputValue}}），但是输入值不会改变！ 我希望它是“测试编辑”，但它保持“测试”。

当我键入另一个字符串时，它可以工作，但是连续两次在同一字符串中输入却不起作用。这是为什么？我怎样才能解决这个问题？

component.html

{{inputValue}} <br />
<input type="text"
       [ngModel]="inputValue"
       (ngModelChange)="onInputUpdate($event)"
       [ngModelOptions]="{ updateOn: 'blur' }"/>

component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {

  inputValue = "teststring";

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngOnInit() {
    this.inputValue = "initial";
  }

  public onInputUpdate(inputValue: string) …