标签: angular-ngmodel

我有一个输入指令,应该允许用户撤消.

Enter使用某些功能保存值,Esc取消上次保存的编辑.

对于Esc我正在使用的按键事件,ngmodel.$setViewValue(scope.last_saved_value)但输入没有更新.我从文档中知道这个函数没有触发,$digest所以我把它放在一个$apply但它仍然无法正常工作.

JSBIN示例

我正在学习Angular.js,我遇到了一个应该很简单的问题,但我似乎无法找到答案.

我想创建具有"connectedTeams"值的表单输入,如下所示:

<input type="text" name="connectedTeam[]"> 
<input type="text" name="connectedTeam[]"> 
<input type="text" name="connectedTeam[]"> 

我已尝试以下角度...

<input type="text" name="connectedTeams[]" class="form-control" ng-model="user.connectedTeams">

...但它将相同的值绑定到所有3个输入.我知道这是有道理的,但我似乎无法弄清楚如何告诉它ng-model是user.connectedTeams.[] (user> connectedTeams>添加到数组.

我希望这足以让某人提供快速答案.

我正在使用Angular JS ng-model来跟踪select标签的选定值.

这是http://jsfiddle.net/8853oxb1/3/的例子

function ControllerA($scope) {
    $scope.optionsArray = [1,2,3,4,5];
    $scope.optionsObject = {"India" : "IN" , "Singapore" : "SG", "Malaysia" : "MY", "Indonesia" : "INDY"};

}

如果,我通过使用Tab键进入下拉列表并尝试按"I"两次以选择以I开头的第二个选项,下拉值按预期更新,但是ng-model只取第一个选项的值"一世".角js中的错误或我在这里做错了什么？

我有一个在该视图中使用父作用域的指令.该指令有一个使用隔离范围的子指令.我试图让父指令观察对子指令的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 ???????

        }, // …

我想'数据绑定'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 …

我有一个指令，它通过 ngModelCtrl.$setViewValue() 在模糊上操作输入字段的 $viewValue。

function _onFocus () {
    presentation = false;
    if(!ctrl.$isEmpty(ctrl.$modelValue)) {
      ctrl.$setViewValue(String(ctrl.$modelValue).replace(/\./, ','));
      ctrl.$render();
    }
  }

普朗克

由于这只是外观问题，我想知道是否有可能在不改变输入字段本身的 $pristine/$dirty 状态的情况下设置 ViewValue。

参考 Angular：$commitViewValue 上的 $setDirty

谁能告诉我是否可以在自定义 Angular 指令的控制器中要求和使用 ngModel 。我试图远离链接功能。我看到大多数示例都使用链接函数，但我认为必须有某种方法可以在指令控制器内使用它？或者只能在链接函数中访问？我见过的一种方法（如下所示）给了我未定义的信息。不知道还有没有其他方法？？我正在尝试验证组件并在错误对象上设置无效的类。

//directive
angular.module('myApp', [])
  .directive('validator', function (){
    return {
      restrict: 'E',
      require: {
           ngModelCtrl: 'ngModel',
           formCtrl: '?^form'
      },
      replace: true,
      templateUrl: 'view.html',
      scope: {},
      controllerAs: 'ctrl',
      bindToController: {
         rows: '=',
         onSelected: '&?' //passsed selected row outside component
         typedText: '&?' //text typed into input passed outside so developer can create a custom filter, overriding the auto
         textFiltered: '@?' //text return from the custom filter
         ngRequired: "=?" //default false, when set to true the component needs to validate …

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

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"

如何在多选中设置默认选定值。我从数据库中获取current_options和all_options我想更新current_options并再次发送新值做数据库。

更新数据库有效，但当我刷新页面时，没有选择任何选项。

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

我的模板：

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`