标签: angular-ngmodel

首先,最重要的是,plpler:http://plnkr.co/edit/v1uTz5

这是我遇到的问题的工作演示.

我有一个ng-include包括部分.

在部分内部我有一个带ngModelAND指令的文本输入.

模型在include中相应更新,但忽略了include之外的任何交互.{{test}}包含的外部不会更新,但{{test}}内部会更新.

该指令在被调用时处理该enter键并调用正确的范围和函数.但是,该$scope.test变量从未更新过,但$scope.testFinal已更新,ng-include模板会正确呈现.尝试重置$scope.test模型也不起作用.

我在这里错过了什么吗？或者这是指令的错误还是与ng-include？

我想要一个由标签和文本框组成的模板.此模板可以在我的页面中的不同位置重复使用.要做到这一点,我已经创建了一个MyTextComponent.我想知道如何将不同的值绑定到组件输入.

例如:

MyTextComponent

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'myText',
    template:`<label>{{someLabel}}</label>
                 <input id=myId type="text" [(ngModel)]=bindModelData>
                 `
})
export class MyTextComponent {
    @Input() myId : string;
    @Input() bindModelData: any;
}

MyPageComponent

import {Component} from 'angular2/core';
import {MyTextComponent} from './MyTextComponent.component'

@Component({
    template:`<myText myId="id1" bindModelData="myString1"></myText>
              <myText myId="id2" bindModelData="myString2"></myText>
              `,
    directives:[MyTextComponent]
})
export class MyPageComponent{
    myString1: string;
    myString2: string;
}

如何将MyTextComponent输入的ngModel绑定到MyPageComponent局部变量？

编辑:添加@Output后尝试,但它没有工作:( MyPageComponent中的插值是空白的,以及日志打印未定义.但插值适用于mytextComponent.任何想法

import {Component} from 'angular2/core';
import {MyTextComponent} from './myText.component'

@Component({
    template:`<myText myId="id1" [(bindModelData)]="myString1"></myText>
              <myText myId="id2" [(bindModelData)]="myString2"></myText>
              {{myString1}}
              {{myString2}}

              <button (click)="clicked()">Click …

在我的HTML页面中,我有两组基于布尔的单选按钮:标签:"是"和"否"/值:分别为True和False.我正在填充PostgreSQL数据库表中的完整表单,以允许经过身份验证的用户查看带有填充数据的表单,并编辑包含单选按钮的填充字段,然后保存将数据保存到数据库的表单.所有其他文本字段填充没有问题; 这是收音机按钮的集合我有一个问题,预先勾选单选按钮.

下面没有预先填充前端检查的内容(但添加了HTML源中已检查的正确属性):

    <input id="billing-no" type="radio" name="billing" ng-model="person.billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" ng-model="person.billing" value="TRUE" ng-checked="person.billing == 'true'" />

但是,这会在加载时检查正确的单选按钮:

    <input id="billing-no" type="radio" name="billing" value="FALSE" ng-checked="person.billing == 'false'" />
    <input id="billing-yes" type="radio" name="billing" value="TRUE" ng-checked="person.billing == 'true'" />

注意:我需要检查指令ng-checked中的字符串boolean值,因为boolean值总是以PostgreSQL中的字符串形式返回.显然,当从具有布尔数据类型的列查询数据时,这是PostgreSQL设计的一部分.

添加ng-model指令时,不再选中单选按钮(至少在渲染的浏览器视图中).奇怪的是我查看了源代码,它清楚地检查了正确的一个.更奇怪的是,我必须两次单击单选按钮才能"检查"它.我已经在最新版本的Chrome,FF和IE中对此进行了测试,这一切都导致了同样的问题.

问题是:在添加ng-model指令时,为什么HTML源会在单选按钮属性中添加"已检查",但似乎没有标记单选按钮？此外,为什么我必须在应该检查的单选按钮上单击两次？

解决方案: 为了解决这个问题,我从单选按钮中删除了ng-checked指令,并且只使用了@Cypher和@aet建议的ng-model.然后我用指令ng-value"true"和"false" 替换了属性值.之后,我在控制器中设置了值.

HTML

<input id="billing-no" type="radio" name="billing" ng-model="person.billing" ng-value="false" />
<input id="billing-yes" type="radio" name="billing" ng-model="person.billing" ng-value="true" />

Angular JS

app.controller('peopleCtrl', function($scope, peopleFactory){
    ... …

我希望能够为我的模型的属性设置我的初始值

<input type="text" ng-model="selectedModel.title" name="title" value="" >

如上所示,我希望属性的值为空字符串,以便最初使用空字符串实例化输入文本字段.

但是,目前ng-model="selectedModel.title"覆盖了value="".

我如何通过这个？

我有一个用于搜索的输入字段:

<input id="search_input" type="text" ng-model="filter.search_terms">

我还使用了许多其他过滤器(复选框,收音机等),我在过滤器上有一个$ watch,所以任何更改都会触发搜索.问题是我不希望每次输入一个字母时都要搜索文本字段,只希望只有在按Enter键时才将其"保存"在filter.search_terms上.

是否有一种简单的方法可以执行此操作,还是必须删除ng-model并使用将其设置为输入的功能进行ng-click？

我在角度2中使用bootstrap datetimepicker

https://eonasdan.github.io/bootstrap-datetimepicker/

在我的模板中,我有:

<div class='input-group date datepicker'>
         <input type='text' class="form-control" [(ngModel)]="date">
         <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar" (click)="getCalendar()"></span>
       </span>
   {{date}}
</div>

问题是当我通过点击选择日历上的日期时,它不会触发任何"更改"事件(换句话说,ngModel不会触发).如果我在文本框中输入,则{{date}}显示值加上我键入的文本.

如果用户单击选择器中的日期进行更改,如何检测文本框中的更改？

我有一个表单和一个项目列表.我曾经ng-model="searchFor"适当地过滤掉项目列表(这部分工作正常),但我也想"提交"过滤掉的项目 - 这也需要ng-model="adding_item.name"输入字段(我认为).

你可以ng-models在一个输入字段上有多个？还有另一种方法吗？

我正在尝试处理ngModel不同浏览器中的不同行为.

我的指令包装jqueryUI自动完成,并在其select调用的事件上ngModel.$setViewValue(selectedItem.id).自动完成功能允许用户通过鼠标单击或按enter键盘选择项目.

如果建议的项目是:

{
  "name": "Apple",
  "id": "1000"
}

我希望在选择之后,ngModel值将被选为项目id- 1000.

• 在Chrome中它的工作原理确定-它集$viewValue和$modelValue正确的($modelValue=1000).

• 在Firefox中它将模型设置为Chrome($modelValue=1000),但是当我点击其他地方时 - 使模糊(然后浏览器可能触发change事件),模型更改并且它变得与可见输入值($modelValue='Apple')相同.

• 在IE 11中,只有当我通过鼠标单击选择项目时,它才会设置模型正确.如果按下选择它enter,模型将变为可见输入值($modelValue='Apple')

这是plunkr:http://plnkr.co/edit/o2Jkgprf8EakGqnpu22Y? p =preview

我想在每个浏览器中达到相同的行为.如何处理那些问题？

我正在尝试将a的值存储contenteditable到我的JS代码中.但我无法找出为什么ng-model在这种情况下不起作用.

<div ng-app="Demo" ng-controller="main">
    <input ng-model="inputValue"></input>
    <div>{{inputValue}}</div> // Works fine with an input
    <hr/>
    <div contenteditable="true" ng-model="contentValue"></div>
    <div>{{contentValue}}</div> // Doesn't work with a contenteditable
</div>

有没有办法解决这个问题？

请参阅:JSFiddle

注意:我正在创建一个文本编辑器,因此用户应该看到结果,而我将HTML存储在其后面.(即用户看到:"这是一个例子!",同时我店:This is an <b>example</b> !)

我有一个输入字段,我希望他用户输入一个数字,所以我创建了一个type ="number"的输入字段.

当我在1.2中使用它时,我没有错误

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
    <script>
          var app = angular.module('app', []);
            app.controller('MainCtrl', ['$scope', function ($scope) {
                $scope.person = [
                {"name": "Alex","pts": "10"}
            ];
            }]);
    </script>
        <div ng-app="app">
                <div ng-controller="MainCtrl">
                  {{person | json }}<br>
                  name: <span ng-bind="person[0].name"></span></br>
                  <!-- pts: <input ng-model="person[0].pts"> -->
                  pts: <input type="number" ng-model="person[0].pts"><br?
            </div>
        </div>

http://codepen.io/anon/pen/dPKgVL

但是当我在1.3中使用它时,我得到错误:[ngModel:numfmt]但是当我更新数字时,它似乎仍然绑定到范围.

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script>
          var app = angular.module('app', []);
            app.controller('MainCtrl', ['$scope', function ($scope) {
                $scope.person = [
                {"name": "Alex","pts": "10"}
            ];
            }]);
    </script>
        <div ng-app="app">
                <div ng-controller="MainCtrl">
                {{person | json }}<br>
                  name: …