标签: angular-ngmodel

说我有以下指令:

myApp.directive('myDirective', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function(scope, elem, attrs, ngModelCtrl) {
            scope.$watch('ngModel', function() {
                ngModelCtrl.$modelValue = 'foo';
            });
        }
    }
}); 

以下html:

<input ng-model="name" my-directive></input>

基本上,每当用户更改输入时,my-directive理想情况下将内部模型值更改为"foo",同时保持视图值不变.

但是当我$scope.name在相应的控制器中打印出来时,它不记录"foo",它会记录用户输入的内容.

看起来这ngModelCtrl.$modelValue不是控制器正在访问的 - 我是不正确地接近这个问题？

(另外观察ngModel范围感觉确实是错误的,但我不确定是否有任何其他方式.任何建议都会非常感激!)

将代码提供给我的控制器:

$scope.entity = {
  firstName: 'Jack',
  lastName: 'Bauer',
  location: {
    city: 'New York'
  }
};
$scope.path = 'location.city';

如何动态绑定ngModel到entity指定的属性path？

我尝试过类似的东西,但无济于事:

<input ng-model="'entity.' + path">

HTML

<input type="checkbox" id="1" [(ngModel)]="filter" (change)="onFilterChange($event)"> CheckBox

<button (click)="filter = !filter">Change Status</button>

TS

export class HelloWorld {

  filter : false;

  onFilterChange() {
    console.log('filter change called');
  }
}

当我直接点击复选框时,会触发更改事件.但是当我点击"更改状态"按钮时,复选框状态正在改变,但更改事件未触发.有人可以让我知道怎么做吗？

我想要一个自定义控件,用于ngModel.$formatters在服务器依赖项加载后立即格式化数据.在我的情况下,它需要加载查找表以从一种id转到另一种id.$modelValue商店一件事$viewValue显示另一件事.相当直接的东西.

诀窍是,如果我的查找表没有加载,我不能格式化为$ viewValue.

加载数据后,我需要执行以下操作:

• ngModel.$formatters.push(myFormatter)
• 告诉ngModel从中启动管道 $modelValue -> $formatters -> $viewValue

$render()不起作用,这只是将值移动$viewValue到UI控件. $rollbackViewValue()看起来很有希望,但这只是在一个不稳定的版本(1.3.0-beta.18).

代码示例:

mappingTable.load().then(function(data){
  mappingData = data;
  ngModel.$formatters.push(myFormatter); // needs mappingData in order to function
  // TODO: Tell ngModel to run the existing $modelValue through $formatters to calculate a  new $viewValue and $render it
  //ngModel.$render() // doesn't work, only puts the $viewValue in the DOM element.
});

我一直在看Angular文档:https: //docs.angularjs.org/guide/forms#custom-validation

我正在尝试使用自定义指令创建自己的输入字段验证器.我创建了一个与上面链接相似的指令,只使用我自己的验证功能(6位密码)进行了自定义:

app.directive('password', function() {
   return {
       require: 'ngModel',
       link: function(scope, element, attrs, ctrl) {
           ctrl.$validators.password = function (modelValue, viewValue) {
               if (/^[0-9]{6}$/.test(viewValue)) {
                   return true;
               }

               return false;
           };
       }
   };
});

当我运行它时,我收到此错误:

Error: ctrl.$validators is undefined

我在这里错过了什么？

我想在显示Firebase数据库的表中更新数据.

表中的每一行代表一个特定用户的数据.我的目标是能够更新用户数据的一个字段中的数据.在此示例中,我尝试基于复选框更改用户角色ng-true-value="'admin'" ng-false-value="'user'".

如何获取我正在编辑/更新信息的行的用户ID并将其传递给更新功能？目前代码采用当前用户ID.

我用它更新用户信息的功能是:

$scope.updateRole= function () {

            var updated_user_info= {
                role: $scope.user.role

            };
            var myuser = firebase.auth().currentUser;//change this part?!
            DatabaseRef.ref('users/' + myuser.uid).update(updated_user_info)
                .then(function () {
                    console.log("update success");
                }).catch(function (error) {
                $scope.errMsg = true;
                $scope.errorMessage = error.message;
            });
        }

html视图:

<tr ng-repeat="obj in $data">   
    <td data-title="'First Name'" filter="{ 'First Name': 'text' }" sortable="'firstName'">{{ obj.firstName }}</td>
    <td data-title="'Last Name'" filter="{ 'Last Name': 'text' }" sortable="'lastName'">{{ obj.lastName }}</td>
    <td data-title="'Role'" filter="{ 'Role': 'text' }" sortable="'role'">
        <input type="checkbox" ng-model="user.role" ng-true-value="'admin'" …

这是一个带有两个方式绑定输入字段的表单.目标是创建相同的表单来编辑和创建数据.这已经完成,但我很确定可以有更好的方法来实现这一点(比如使用AbstractControl功能).我也错过了一个修复程序 - 如果clickEdit()被点击,则需要使用该用户想要编辑的对象更新表单值.感谢您提供任何帮助,尤其是解释AbstractControl和NgModel...

<div>
<form (ngSubmit)="clicked ? onEditSubmit($event) : onRegisterSubmit($event)" [formGroup] = "form">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >

  </div>
  <div class="form-group">
    <label>Username</label>
    <input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!form.valid"> Submit </button>
</form>
</div>

<br>
<br>

<table  border="2" class="table table-striped">
<tr>
  <th>Full Name</th>
  <th>Username</th>
  <th>Email</th>
  <th>Password</th> …

我的注册表格带有文本框用户名.我想要做的是当用户输入用户名时,custom指令将检查输入的用户名是否存在于数据库中.

directives.js

angular.module('installApp').directive('pwCheck', function ($http) {
  return {
    require: 'ngModel',
      link: function (scope, elem, attrs, ctrl) {
        elem.on('blur', function (evt) {
          scope.$apply(function () {
          $http({ 
          method: 'GET', 
          url: '../api/v1/users', 
          data: { 
            username:elem.val(), 
            dbField:attrs.ngUnique 
          } 
      }).success(function(data, status, headers, config) {
        ctrl.$setValidity('unique', data.status);
        });
       });
      });
     }
    }
});

如果它存在,我div class = "invalid"将在html表单中显示标签"用户名已存在".

registration.html

    <form name  = "signupform">
      <label>{{label.username}}</label>
        <input type="text" id = "username" name = "username" ng-model="user.username" class="form-control"></input>
        <div class="invalid" ng-show="signupform.username.$dirty && signupform.username.$invalid"><span ng-show="signupform.username.$error.unique">Username already exists.</span>
        </div>
    </form>

但是现在,他们没有工作:-(我做得对吗？请建议或建议我应该做的事情.提前谢谢.

我正在使用ng-options生成一个选项为位置的选择标记.标签是位置名称,值是位置ID(在数据库中).

我已将值(位置ID)绑定到ng-model属性,但我还想将标签(位置名称)绑定到不同的ng-model属性.(我需要将id字段分开,因为这将被发布到需要此特定属性的服务器.)在Angular中执行此操作的最佳方法是什么？

我的代码:

<div ng-app="app"><div ng-controller="edit">
  <select ng-model="purchase.pickUpLocationId" ng-options="loc.id as loc.name for loc in purchase.availableLocations"></select>

  <!-- This is the model not yet bound: -->
  <p>You have selected {{ purchase.pickUpLocationName }}</p>

</div></div>

var app = angular.module('app', []);

app.controller('edit', ['$scope', function($scope) {
    $scope.purchase = {
        pickUpLocationId: 30,
        availableLocations: [
            {id: 20, name: "Charleston, SC"},
            {id: 30, name: "Atlanta, GA"},
            {id: 40, name: "Richmond, VA"},
        ]
    };
}]);

我正在做 Angular Tour-hero 项目（用“User”替换 Hero）。当我将英雄（用户）和英雄详细信息（用户详细信息）分开时，当我尝试访问详细信息时，它没有显示，更新功能也不起作用。它显示此错误：

错误 TS2532：对象可能“未定义”。

6 <input id="用户名" [(ngModel)]="用户名" placeholder="名称">

我认为，目的user是提出问题。但是当我尝试完全按照教程添加 MessageService 等操作时，它就起作用了。但是当我删除所有这些时，它给出了这个错误。先谢谢您的帮助。

用户详细信息.component.html：

<div>
  <h2>{{user.name | uppercase}} Details</h2>
  <div><span>id: </span>{{user.id}}</div>
  <div>
        <label for="user-name">User name: </label>
        <input id="user-name" [(ngModel)]="user.name" placeholder="name">
    </div>
    <button (click)="goBack()">Back</button>
    <button (click)="save()">Save</button>
</div>

用户详细信息.component.ts：

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/model/user';
import { UserService } from 'src/app/services/user/user.service';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.scss']
}) …