标签: angular-ngmodel

有没有办法将对象用于单选按钮的ng值？

想象一下,你有一个单选按钮,其ng模型是一个对象,如下所示:

modelObject: {val:'', text:''}

这将是单选按钮:

<input type="radio" ng-model="data.modelObject" ng-value=""/>

有没有办法做以下事情(显然它不起作用)

<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>

？谢谢

我知道我可以使用ng-change指令.我只是想知道我问的是否有可能,它会非常聪明

编辑:根据评论的要求,我提供了一些关于我的设置的额外信息.

我想在模型中保存按钮的值和标签.所以假设我的控制器中有一个名为impactOptions的数组和一个用于创建按钮的ng-repeat指令:

<div ng-repeat="option in impactOptions" >
    <input type="radio" ng-model="data.modelObject.val" id="rbGroup{{option.id}} ng-value="option.id"/>
    <label for="rbGroup{{option.id}}">{{option.text}}</label>
</div>

这个设置的问题是,这样我只保存按钮的值,而我也想保存它的标签.我以后真的需要它.

我正在寻找一种方法来做这样的事情

<input type="radio" model="data.modelObject" ng-value="val:option.id, text:option.text"/>

在AngularJS中,有没有办法直接在<form>元素上声明ng-model,而不是必须在该表单的每个控件/输入上执行它,然后能够通过它们的名称访问控制器中控件的值？

具体来说,如果您有这样的表格,

<form>
  <input type="text" name="email">
  <input type="text" name="age">
</form>

通常,你会做这样的事情,

<form>
  <input type="text" ng-model="user.email">
  <input type="text" ng-model="user.age">
<form>

然后,您可以在控制器中访问用户对象及其属性:

$scope.user
$scope.user.email
$scope.user.age

我想做这样的事情:

<form ng-model="user">
  <input type="text" name="email">
  <input type="text" name="age">
</form>

然后能够访问控制器中的值:

$scope.user.email
$scope.user.age

我问的原因是我正在对一个现有的网络项目进行投影,一些表格很容易有20或30个控件,并且单独定义ng模型似乎是一种矫枉过正.

我能找到的所有表单示例都在各个控件上声明了ng-model.我也能够挖出这张票,基本上说这样的东西需要进行一次重大的AngularJS大修,所以我怀疑这可能是不可能的.但机票是从一年前开始的,也许事情从那时起就发生了变化.

我试图看看ngModel的价值是什么:

.directive('myDir', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      if (!ngModel)
        return

      console.log(ngModel)
      console.log(ngModel.$modelValue)
    }
  };
})

即使我的ngModel是一个数组,它记录NaN？

我正在使用的框架(jQuery Mobile)侦听textareas的更改事件以更改标记.这是框架代码,所以我不能改变它并包含正确的AngularJS函数.

我通过ng-model将textarea绑定到范围变量.当范围变量发生变化(因此textarea内容因为它被绑定)时,不会触发javascript change事件.但是,如果没有更改事件,jQuery Mobile无法更改标记.

是否有内置的方法让Angular在不编写指令的情况下触发更改事件？如果我使用指令或ng-change,我必须在textarea元素的每次出现时添加相应的代码.

我正在尝试做的简短示例(也可用作jsFiddle):

<div ng-app="app" ng-controller="Controller">
    <textarea ng-model="textValue"></textarea>
</div>

<script type="text/javascript>
var module = angular.module("app",[]);

module.controller("Controller", function ($scope) {
   $scope.textValue = "Test"; 

   window.setInterval(function () {
       $scope.textValue = $scope.textValue === "Test" ? "Hello World" : "Test";
       $scope.$apply();
   },2000);
});

//Dummy framework code which I do not have access to
document.querySelector("textarea").addEventListener("change", function () {
  alert("changed");
});
</script>

模型更新时,不会触发任何更改事件.如果您键入textarea并单击外部(基本textarea更改),则会触发change事件.

假设我想要一个指令，它接受用户在输入中键入的内容并将其转换为小写。

所以我想出了一个这样的指令（在这个 Plunker http://plnkr.co/edit/jnE3s8MRr1tFCX0WVYel?p=preview）：

app.directive('lowerCaseInput', function() {
  return {
    restrict: 'E',
    template:'<input ng-model="vm.input" />',
    scope: {},
    require: ['ngModel', 'lowerCaseInput'],
    controller:function() {},
    link: function(scope, el, attrs, ctrls) {
      var ngModel = ctrls[0], vm = ctrls[1];
      ngModel.$render = render;

        // view-> model
      ngModel.$parsers.push(function(value) {
        return toLowerCase(value);
      });

        // model->view
      ngModel.$formatters.push(function(value) {
        return value;
      });

      function render() {
        vm.input = ngModel.$viewValue;
      }

      // view -> model && model-> view
      function toLowerCase(value) {
        return value && value.toLowerCase();
      }

      scope.$watch('vm.input', function(newVal, oldVal) {
        if(newVal …

Angular.js ngModel可以声明解析器和格式化程序的链。在“如何在angular.js中进行双向过滤？”的绝佳答案中可以找到更多详细信息。

现在，只有ngModel更新时，格​​式化程序链才会运行。因此，如果您有第二个影响viewValue的输入参数（在一个格式化程序中使用），则不会触发View的更新。就我所发现的类似，ngModel仅使用一个简单的$ watch-因此，如果您的模型是集合/对象，则在子元素发生更改时也不会触发。

为ngModel实现深入监视的最佳方法是什么-
还是应重新运行格式化程序链的附加参数的监视方法是什么？

还有其他类似的问题：
Angularjs：更改某些设置后如何“重新运行” $ formatters？

我有这样一个简单的html形式

<div ng-app="app">
    <form action="" ng-controller="testController" id="parent">
    </form>
</div>

现在我想从javascript添加一个输入字段

var app = angular.module('app',[]);
app.controller('testController',testController);
function testController($scope){
    var input = document.createElement('input');
    var form = document.getElementById('parent');

    input.setAttribute("type","number");
    input.setAttribute("id","testId");
    input.setAttribute("name", "test");
    input.setAttribute("ng-model","test");  
    form.appendChild(input);
}

输入字段也会按预期生成

<input type="number" id="testId" name="test" ng-model="test">

但是此输入字段之间的ng-model $scope.test不起作用。

我试图ng-model用Angular js从选择标签中获取值.但是,当我呈现此代码时,页面加载完成时所选框为空.我试图设置第一个选项,但这不起作用.我试过selected="selected"但不行.我还尝试了有关ng-option的文档中提到的其他方法,但它似乎没有帮助.我需要ng-model值才能使我的页面的其他部分工作.

<select id="teamSelection" ng-model="teamSelected"> <option value="All" selected>All</option> <option value="1">A</option> <option value="2)">B</option> <option value="3">C</option> <option value="4">D</option> </select>

我有一个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未定义,我无法告诉用户必须删除多少字符才能使输入有效.

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

我正在使用Angular Material Select显示假期。当用户选择假期时，我想显示日期而不是假期名称。例如，如果用户选择“圣诞节”，则我希望所选值显示为“ 12月25日”

<mat-form-field>
  <mat-select [(ngModel)]="selectedHoliday" placeholder="Select A Holiday" (change)="eventSelection($event.value)">
    <mat-option *ngFor="let holiday of holidays" [value]="holiday">{{ holiday.name }}</mat-option>
  </mat-select>
</mat-form-field>

我在选择更改时将ngmodel设置为正确的日期：

selectedHoliday: string;

holidays = [
 { name: 'Christmas', date: 'Dec 25'} ,
 { name: 'New Years', date: 'Jan 1'}
]


eventSelection(event){
 this.selectedHoliday = event.date
}

当我将selectedHoliday设置为日期时，没有任何内容显示为所选值。这是一个小矮人：https ://plnkr.co/edit/9lhHJhNyuWUxqYF6nMwK ? p = preview