标签: angular-ngmodel

我是AngularJS的新手,并尝试创建一个简单的应用程序,允许我将文件上传到我的Laravel驱动的网站.我希望表单向我显示上传项目的预览.所以我使用ng-model来实现这一点,我偶然发现了以下情况:

我有一些基本引导样式的输入,我使用AngularJS模板的自定义括号(因为正如我所提到的,我正在使用Laravel及其叶片系统).我需要从输入中删除空格(当我键入它时)并用短划线替换它们:

<div class="form-group"><input type="text" plaeholder="Title" name="title" class="form-control" ng-model="gnTitle" /></div>

然后我有这个:

<a ng-href="/art/[[gnTitle | spaceless]]" target="_blank">[[gnTitle | lowercase]]</a>

我的app.js看起来像这样:

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

app.config(function($interpolateProvider){
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});

app.filter('spaceless',function(){
    return function(input){
        input.replace(' ','-');
    }
});

我收到以下错误:TypeError:无法读取未定义的属性'replace'

我知道在过滤之前我需要定义值,但我不确定在哪里定义它.而且,如果我定义它,我不希望它改变我的占位符.

我有一个输入字段,我希望他用户输入一个数字,所以我创建了一个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: …

我有一个AngularJS表单,我正在使用ng-repeat根据另一个选择动态构建表单的字段.我正在尝试动态生成模型名称并遇到问题.

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters.{{parameter.paramName}}" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

我需要的是评估像ng-model ="formData.parameters.fooId"或ng-model ="formData.parameters.barId"之类的东西

以上结果导致错误:错误:[$ parse:syntax]语法错误:令牌'{'是表达式[formData.parameters.{{parameter.paramName}}]的第21行的意外标记,从[{{开始parameter.paramName}}].

在我的控制器中我有:

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

我也尝试过ng-model ="formData.parameters.[parameter.paramName]"(基于这个问题我如何在AngularJS中设置动态模型名称？),但是没有评估并且无法设置ng - 模型值.我不确定我想要完成的是否可能.我假设我需要通过控制器来实现我想要的,但任何帮助将不胜感激.

该文件说,

updateOn:指定输入绑定到哪个事件的字符串.您可以使用空格分隔列表设置多个事件.有一个名为default的特殊事件与属于控件的默认事件匹配.

该页面中提到的几个事件:blur,default,submit.还有其他人吗？完整列表是否记录在何处？

我想<select>在表单中使用a 让用户能够更新不同的值<option>.我使用了指南中的技术:https://angular.io/docs/ts/latest/guide/forms.html.这是我正在谈论的样本:

<div class="form-group">
    <label for="type">Type :</label>
    <select class="form-control" [(ngModel)]="order.type" ngControl="type">
        <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>
</div>

在我的order-details.component中,我有一个updateOrder(),它从myApp.services调用updateOrder().

我的问题是当我尝试将数据从表单发送到后端时:所有具有a的部分<input>都可以,但不是那些<select>(它返回原始值,而不是选择的那个).

有没有人遇到过这个或类似的问题？谢谢你的帮助!

如果我在组件的模板中执行类似的操作:

<input [(ngModel)]="myProperty"></input>

然后它工作,但如果我用我的组件中的函数执行它不会:

<input [(ngModel)]="getMyProperty()"></input>

这是傻瓜.在RC6上测试过.为什么？

我目前正在开发Angular中的应用程序.到目前为止,一切都很顺利.对于棱角分明,我真的非常非常新,我很惊讶第一个真正的障碍花了这么长时间.

情况:

我有一个对象数组,每个对象都有一个订单.

category.items = [{id: 1, order: 1, type: {}, ...}, {id: 54, order: 2, type: {}, ...}, {id: 3, order: 3, type: {}, ...}]

用户需要能够重新排列这些项目.必须将新订单设置为对象属性"订单".

在html中,这些对象的呈现方式如下:

<div class="category">
    <div class="item" ng-repeat="(itemIndex, item) in category.items track by $index">
        <div class="header">
        </div>
    </div>
</div>

在header-div中我有一个输入字段,类型为select.

<select ng-model="item.order"  ng-change="changeItemOrder((itemIndex + 1), item.order, itemIndex)">
  <option ng-repeat="item in category.items" ng-value="($index + 1)">{{$index + 1}}</option>
</select>

changeItemOrder的代码:

$scope.changeItemOrder = function(old_order, new_order, item_index) {
    new_order = parseInt(new_order);
    if (old_order != new_order) {
        var …

在Angular 1.2和1.3之间,ngModelController解析管道的行为似乎已经发生了变化.我现在总是看到一个新的名为确认键'parse'添加到所有$error对象,每当解析器之一返回undefined,它会覆盖/替换可能已设置的所有其他验证密钥.

例如,这是Angular 1.2.23中的一个工作示例 - 尝试输入一个超出范围的数字:

http://jsfiddle.net/8doq0saf/5/

在1.3-rc下运行的相同内容给出了不同的结果:

http://jsfiddle.net/1t52s9b2/4/

我还没有找到有关此更改的任何文档.解析密钥的目的是什么,以及如何更改代码以恢复旧的行为？

angular.module('app', []).directive('number', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {

            // valid number
            ctrl.$parsers.push(function (value) {
                var valid = angular.isUndefined(value) || value === '' || isFinite(value);
                ctrl.$setValidity('number', valid);
                return valid
                    ? angular.isUndefined(value) || value === '' ? undefined : Number(value)
                    : undefined;
            });

            ctrl.$parsers.push(function (value) {
                if (!angular.isDefined(attrs.minNumber)) {
                    return value;
                }
                var valid = angular.isUndefined(value) || Number(value) >= Number(attrs.minNumber); …

我想以编程方式取消选中一个复选框.我知道如何在javascript中,但因为我使用角度,我认为它是不同的.

这是jsfiddle的链接:https://jsfiddle.net/TKVH6/499/

这是我第一次使用jsfiddle所以如果你看不到脚本和HTML,请告诉我.

这是html

<input type="checkbox" ng-model="v" ng-click="checkAll()" />
<button ng-click="x()">eto</button>

这是棱角分明的

$scope.x = function () {
    $scope.v.checked=false;
};

我知道有很多这样的问题,我已经尝试过了,但是我无法让它发挥作用.

谢谢!

我很惊讶没有确切的答案:

Root/forChild的方法是什么？

例如在RouterModule中:

Router.forRoot(routes)