标签: angular-ngmodel

粗略地说,单向数据绑定只是ng-model在页面内绑定,而在涉及控制器时双向绑定.有人可以向我解释这个概念,所以我真的明白如何看待它？什么是3路数据绑定,还有4路,5路？

我的注册表格带有文本框用户名.我想要做的是当用户输入用户名时,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']
}) …

我创建了一个自定义验证指令并在表单中使用它.它可以毫无问题地触发,但在触发验证后,我发现模型值刚刚丢失.说我有

ng-model="project.key" 

并且在验证之后,project.key范围内不再存在.我想某种程度上我理解AngularJS错了并做错了什么.

代码说话.

这是我的html页面:

 <div class="container">
    ...
    <div class="form-group"
            ng-class="{'has-error': form.key.$invalid && form.key.$dirty}">
            <label for="key" class="col-sm-2 control-label">Key</label>
            <div class="col-sm-10">
                <input type="text" class="form-control text-uppercase" name="key"
                    ng-model="project.key" ng-model-options="{ debounce: 700 }"
                    placeholder="unique key used in url"
                    my-uniquekey="vcs.stream.isProjectKeyValid" required />
                <div ng-messages="form.key.$error" ng-if="form.key.$dirty"
                    class="help-block">
                    <div ng-message="required">Project key is required.</div>
                    <div ng-message="loading">Checking if key is valid...</div>
                    <div ng-message="keyTaken">Project key already in use, please
                        use another one.</div>
                </div>
            </div>
        </div>
    <div class="col-sm-offset-5 col-sm-10">
        <br> <a href="#/" class="btn">Cancel</a>
        <button ng-click="save()" ng-disabled="form.$invalid"
            class="btn btn-primary">Save</button> …

ng-init是否关注像ng-model这样的实例化属性的变化？

显然不是,所以我设置了一个如下所示的手表:

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.$watch('myProp1', function(newVal, oldVal){
    $scope.myProp1 = newVal
  })
});

HTML

<body ng-controller="MainCtrl">
<input ng-init='myProp="my property"'>{{myProp}}</br>
<input ng-init='myProp1="my 1 property"'>{{myProp1}}</br>
<input ng-init='myProp11="my 11 property"' ng-model='myProp11'>{{myProp11}}

这是plnkr

1. ng-init是否关注像ng-model这样的实例化属性的变化？
2. 如何查看ng-init实例化的属性中的更改？
3. 上面的$ watch功能有什么问题？

我有这个工作的是重复多次的代码块,因此会为NG-重复循环是巨大的.例如,我的代码的两个实例如下.

    <div>
        <input type="text" ng-model="searchParamaters.userName" placeholder="User Name"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[0].param)" ng-show="showParam(filterParamDisplay[0].param)"></i>
    </div>
    <div>
        <input type="text" ng-model="searchParamaters.userEmail" placeholder="User Email"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[1].param)" ng-show="showParam(filterParamDisplay[1].param)"></i>
    </div>

这是Javascript中的filterParamDisplay数组:

    $scope.filterParamDisplay = [
        {param: 'userName', displayName: 'User Name'},
        {param: 'userEmail', displayName: 'User Email'}
    ];

我一直在尝试将其转换为ng-repeat循环,但到目前为止还没有成功.这就是我编码的内容.

    <div ng-repeat="param in filterParamDisplay">
        <input type="text" ng-model="searchParams[{{param}}]" placeholder="{{param.displayName}}"/>
        <i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"></i>
    </div>

问题是上面的ng-model变量,以及ng-click和ng-show中的$ index.不确定是否可以这样做,非常感谢任何帮助,谢谢!

更新:感谢所有的答案,使用

     <div ng-repeat="p in filterParamDisplay">
...
   ng-model="searchParams[p]" 

效果很好!

仍然在使用$ index无法正常工作的showParam和resetSearchField函数上挣扎.这是我的代码.

    $scope.searchParams = $state.current.data.defaultSearchParams;

    $scope.resetSearchField = function (searchParam) {
        $scope.searchParams[searchParam] = ''; …

我正在使用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中的错误或我在这里做错了什么？

我真的觉得它是一个早期采用者,因为谷歌无法找到解决我的问题的方法:)

我以某种方式得到这个错误:

无法绑定到'ng-model',因为它不是已知的本机属性

我没有在Ionic中看到@Component,所以页面配置如下:

import {Page, NavController} from 'ionic-framework/ionic';
@Page({
  templateUrl: 'app/home/home.html',
  directives: [Select]
})

我的模板是这样的:

<ion-input floating-label>
  <ion-label>Search text...</ion-label>
  <input type="text"  [(ng-model)]="searchInput" />
</ion-input>

我正在使用Ionic 2.

干杯

我想知道如何使用带有1.5角组件的$ formatters和$ parsers.有人可以发布一个例子.

或者是否有类似我可以使用的东西.