标签: angularjs-ng-model

我已经找到了一些关于如何获得ng-model内部值的一些很好的答案ng-repeat,但到目前为止,我还没有找到任何覆盖setter的内容.假设我有这样的事情:

<div ng-repeat="item in getItems()">
    <input ng-model="itemTitle" ng-model-options={getterSetter:true}">
</div>

如果我有一个输入框,我会使用类似这样:

...
var _val = '';
$scope.itemTitle = function(val){
    return angular.isDefined(val) ? (_val = val) : _val;
}
...

但是,这会改变每个输入框的值.是否可以定义变量和setter,可能使用数组？或者有更好的方法来获取和设置ng-repeat内的输入框？

我已经实现了一个自定义输入指令 - counter具有重置功能.该指令有require: "ngModel".

我复位指令的的原始状态ngModel用$setPristine().不同$setDirty(),$setPristine()不触及$pristine父表单的状态.

问:如何"通知"父表单该指令不再"脏",以便父表单可以$pristine重置其状态？

请记住,只是调用form.$setPristine()是不够的,因为表单中可能还有其他"脏"控件,我的指令不会(也不应该)知道.

这是指令的链接功能:

link: function(scope, element, attrs, ngModel){

  var original;

  ngModel.$render = function(){
    original = scope.counter = ngModel.$viewValue;
  };

  scope.up = function(){
    ngModel.$setViewValue(++scope.counter);
  };

  scope.reset = function(){
    scope.counter = original;
    ngModel.$setViewValue(scope.counter);
    ngModel.$setPristine(); // this sets $pristine on the directive, but not the form
  };
}

以下是它的使用方法:

<div ng-form="form">
  <counter ng-model="count"></counter>
</div>

plunker

我有一个循环ng-repeat

<div ng-repeat="data in datas">
Name: {{data.name}} <input type="text" ng-model="age">
</div>

我想$scope.age成为$scope.age_data.name.例如:$ scope.age_Tan,$ scope.age_Jim ...所以我试过ng-model="age_{{data.name}}"但是它会出错.怎么解决这个？

我现在使用Angular JS进行所有表单管理.为输入数据被存储到其相关联的ngModel,其可与在要处理$scope的controller.

所以我有这样的表单设置:

<form name="addJob" novalidate data-ng-submit="addJob.$valid && addJob(job)">
  <input type="text" placeholder="Job Title" data-ng-model="job.title" required />
  <textarea placeholder="Brief" data-ng-model="job.brief"></textarea>
  <button type="submit" data-ng-disabled="addJob.$invalid">Add Job</button>
</form>

这在所有主流浏览器中都能正常工作(除了我没有测试过IE).您会注意到我没有在输入或textarea上包含名称属性.我出于任何原因需要它们吗？我以前读过以下内容:

Note: Only form elements with a name attribute will have their values passed when submitting a form. 

但我的数据传递得非常好,因为它与...有关ngModel.是正确的方法 - 包括或不包括名称属性？

我有以下简单形式,其中type ='email'输入绑定到模型:

<div ng-app>
    <h2>Clearing ng-model</h2>
    <div ng-controller="EmailCtrl">
        <form name="emailForm" ng-submit="addEmail()">
            <input type="email" name="email" ng-model="userEmail" placeholder="email@domain.com">
            <span ng-show="emailForm.email.$invalid && emailForm.email.$dirty">invalid email</span>
            <span ng-show="emailForm.$invalid">form invalid!</span>
        </form>
        <br/>
        <button ng-click="clearViaUndefined()">clear via undefined</button>
        <button ng-click="clearViaNull()">clear via null</button>
        <button ng-click="clearViaEmptyString()">clear via empty string</button>
    </div>
</div>

假设用户输入了无效的电子邮件,然后单击"取消"按钮...因此需要重置表单.

在"取消"按钮的ng-click处理程序中,如果我将模型的值设置为"undefined",则不会将输入元素的$ valid属性更改回true(也不是表单的形式).

function EmailCtrl($scope) {

    $scope.clearViaUndefined = function () {
        $scope.userEmail = undefined;
    };

    $scope.clearViaNull = function () {
        $scope.userEmail = null;
    };

    $scope.clearViaEmptyString = function () {
        $scope.userEmail = "";
    };
}

如果我将模型的值设置为空字符串""或null,则$ valid属性确实设置为true.

为什么是这样？

我在这里有一个JS小提琴演示了这种行为:

http://jsfiddle.net/U3pVM/12830/

我有一个AngularJS Web应用程序,其中包含一个包含textarea的表单,如下所示:

<textarea required ng-maxlength="1000" ng-model="foo"></textarea>

验证逻辑简单地说用户必须输入最多1000个字符的值.进一步假设我决定我希望应用程序向用户显示在达到限制之前剩余的字符数.没问题:我只想写一下:

<div ng-if="foo.length <= 1000">
    {{ 1000 - foo.length }} characters remaining
</div>

以上工作完美.现在,假设我想显示一条消息,指示用户输入了太多字符,所以我写了以下内容:

<div ng-if="foo.length > 1000">
    {{ foo.length - 1000 }} characters too many
</div>

上面的代码不起作用,似乎是这种情况,因为Angular不接受输入值,所以foo未定义,我无法告诉用户必须删除多少字符才能使输入有效.

因此,我想知道是否有办法获取无效输入的值,并告诉用户一个有意义的原因,它是无效的.

我有一个函数getData,它只增加var计数器的值.

每当发生增量时,我都希望angular能够自动更新div中的内容

我尝试过ng-bind,但只有点击表单元素才有效.

enquire.controller('DisplayEnquiries', function($scope){
$scope.getData = function(){
    console.log('Run ' + $scope.counter);
    $scope.counter;
    if($scope.counter == undefined || $scope.counter == null){
        $scope.counter = 1
        $scope.counter++;
    }
    else{
        $scope.counter++;
    }
    console.log('Execute ' + $scope.counter);
    $scope.count = $scope.counter;
}
    setInterval($scope.getData, 1000);
});

HTML

<div class="col-sm-5" ng-controller="DisplayEnquiries">
        <h4>Unread User Queries</h4>
        <p>
            Count : <span ng-bind="count"></span>
        </p>
    </div>

我希望你们能帮助我阐明自从我们从 Angular 1.3 迁移到 Angular 1.4 以来我一直面临的问题。

我创建了一个支持JSFiddle演示来演示这一点

解释

我有一个控制器，其中包含两个实例的列表MyElement，用户可以使用<select>.

还有一个按钮，用于将===所选元素MyElement与列表中的第一个元素进行比较 ( )。此比较的结果将记录到控制台。

使用<select>atrack by element.id来区分 -MyElement实例。

看起来奇怪的是，所选项目永远不等于列表的第一个元素（即使选择了第一个元素）。绑定到的对象ctrl.selectedElement是不同的对象，但具有相同的属性：

NO!
Object {id: 1, description: "First"}
MyElement {id: 1, description: "First"}

当我删除track by element.id 或返回到 Angular 1.3 时，这种行为就会消失（两个元素严格相等，正如我所期望的那样）。

问题

这是一个错误吗？这与fix(ngOptions)有关，但我不知何故错过了其中的含义？到底是怎么回事？

提前致谢！

我有一个带有单选按钮的简单表单,它从服务器中提取值并循环遍历它们以提供单选按钮:

<form ng-submit="createSubCategory(subcategory)">
    <div ng-repeat="sub_category in event_sub_categories" >
        <label class="item item-radio">
                  <input type="radio" ng-model="subcategory" ng-value="'{{sub_category}}'" >
                  <div class="radio-content">
                    <div class="item-content">
                      {{sub_category}}
                    </div>
                    <i class="radio-icon ion-checkmark"></i>
                  </div>
         </label>
    </div>
    <div class="padding">
        <button type="submit" class="button button-block button-positive">Continue</button>
    </div>
</form>

表格完美显示.但是,我按下的单选按钮似乎没有保存.这是createSubCategory方法:

$scope.createSubCategory = function(subcategory){
  console.log(subcategory);
}

日志正在显示undefined.填写表格后如何记录子类别？

我有两个共享模块“shared-candidate-login-reg.module.ts”和“shared.module.ts”，我在主页中导入了这两个共享模块。我想在我的“WidgetLogRegComponent”组件（它是我主页的子组件，也是我的“shared-candidate-login-reg.module”的一部分）中使用“shared.module.ts”中的“AlertLblComponent” '）。我也在使用延迟加载。为什么我的 Home 模块中没有“alert-lbl”组件？

我的 alert.module.ts

import { AlertLblComponent } from './../directives';
import { AlertService } from './../services/alert.service';
@NgModule({
    declarations: [
        AlertLblComponent
    ],
    imports: [
        CommonModule,
    ],
    providers: [
        AlertService,
    ],
    exports: [
        CommonModule,
        AlertLblComponent
    ]    
  })
  export class SharedModule {} 

shared-candidate-login-reg.module.ts

import { WidgetLogRegComponent } from './../candidates/widget-log-reg/widget-log-reg.component';
@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    WidgetLogRegComponent
  ],
  exports: [
    WidgetLogRegComponent 
 ]
})
export class ShareCandidateLoginRegdModule { }

home.module.ts

import {ShareCandidateLoginRegdModule} from './../shared/shared-candidate-login-reg.module';
import {SharedModule} from './../shared/shared.module';

@NgModule({
  declarations: [
    HomeComponent …