标签: angular-ngmodel

我一直在阅读一些主题,但无法找到解决这个问题的方法.

我试图在ng-repeat内添加ng-model,如下所示:

<span ng-repeat="list in lists">
         <input type="checkbox" ng-model="formData.checkboxes.{{ list.value }}"> {{ list.number }} {{ list.description }} <br/>
</span>

列表值是这样的:

$scope.lists = [

    {

        value:'value1',
        number: '1',
        description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',    
    },

    {
        value:'value2',
        number: '2',
        description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ', 
        },

        {
        value:'value3',
        number: '3',
        description:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',            },
    ];

在ng-repeat循环中,我希望它构建一个像以下类似的ng模型formData.checkboxes.value1 formData.checkboxes.value2, formData.checkboxes.value3.

这可能吗？当我尝试上述方法时,没有显示出来.我在这做错了什么？

我正在尝试检索a的当前选项的值select,但它返回undefined(我希望它返回一个对象).

标记:

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedLocal" ng-options="item.Nome for item in locais" ng-change="localSelectChange()">
        <option value="">Locais</option>
    </select>
</div>

控制器:

function MyCtrl($scope) {
    $scope.locais = [{
        ID: 109,
        Nome: 'Aeroporto Internacional Hercilio Luz'
    }, {
        ID: 161,
        Nome: 'Koxixos'
    }, {
        ID: 184,
        Nome: 'Praça XV de Novembro'
    }];

    $scope.localSelectChange = function() {
        alert('$scope.selectedLocal: ' + $scope.selectedLocal); // returns undefined
    }
}

奇怪的是我创建了这个jsfiddle以重现问题,使用完全相同的代码,并且它可以工作.

更新:

我在这里创建了一个plunkr ,我在那里复制了这个问题.

第一个选择包含在具有自己的控制器"MyCtrl"的div上,并且它按预期工作,因为我能够从ng-change事件处理函数中检索模型.

第二个选择"属于"DashCtrl,整个Dash选项卡视图控制器.当我尝试从ng-change事件处理函数中检索模型时,它返回undefined.这是为什么？

我首先提到我对Angular很新,所以我可能没有用正确的"Angular方式"做事.

我有以下ng-repeat循环一些数据 - 正在返回正确的数据.

<tr ng-repeat="attribute in attributeCategory.attributes">
    <td>
        {{attribute.name}}
    </td>
    <td>
        <input type="checkbox" ng-model="attr.enabled" ng-checked="{{attribute.parameters.enabled}}" ng-change="updateAttribute(attr, {{attribute.attribute_id}})"/>
    </td>
    <td>
        <input type="checkbox" ng-model="attr.normalise" ng-checked="{{attribute.parameters.normalise}}" ng-change="updateAttribute(attr, {{attribute.attribute_id}})"/>
    </td>                
    <td>
        <input type="checkbox" ng-model="attr.reverse" ng-checked="{{attribute.parameters.reverse}}" ng-change="updateAttribute(attr, {{attribute.attribute_id}})"/>
    </td>
    <td>
        <input type="text" ng-model="attr.min_threshold" ng-value="{{attribute.parameters.min_threshold}}" ng-change="updateAttribute(attr, {{attribute.attribute_id}})"/>                    
    </td>
    <td>
        <input type="text" ng-model="attr.max_threshold" ng-value="{{attribute.parameters.max_threshold}}" ng-change="updateAttribute(attr, {{attribute.attribute_id}})"/>                    
    </td>
<tr>

由于某种原因,input ="text"字段上的ng值未显示.我需要将字段中的数据传递给updateAttribute()函数,这就是我将模型绑定到我正在传递的attr变量的原因.然后,此变量用于API调用.

如果我从文本字段中取出模型,我有正确的值,但我需要有人获得该值并将其传递给函数.

如果还有其他方式我应该这样做,请告诉我:)

所以我对前端(角度,靴子等)完全不熟悉,但是我在这里创建了一个JSFiddle链接,我想要做的是基本上如果有人在下拉列表中选择"VA"选项菜单,我想使用适当的ng(开关或显示),并显示具有相同名称的div类,在这种情况下div class ="VA"

如果他们选择纽约,我希望它显示div-class ="NY",而不是VA div(在我的例子中我只有两个选项,但我会在我的实际程序中有不同的选项(可能是~10) )

任何人都可以帮助我或让我朝着正确的方向前进吗？谢谢.

JSFiddle链接:http://jsfiddle.net/BootstrapOrBust/kw3qgL3f/

<section ng-controller="Ctrl as loc">   
    <select class="form-control">

        <option>Choose Place</option>
        <option value="DC">DC</option>
        <option value="NY">NY</option>
    </select>
</section>

...
...
...

 <div class="DC">
     <table class="table">
         <thead>
             <tr>
                 <th>Location</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><a href="#">Metro</a></td>
             </tr>
             <tr>
                 <td><a href="#">Capital</a></td>
             </tr>
         </tbody>
     </table>
</div>

 <div class="NY">
     <table class="table">
         <thead>
             <tr>
                 <th>Location</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td><a href="#">Subway</a></td>
             </tr>
             <tr>
                 <td><a href="#">Yankees</a></td>
             </tr>
         </tbody>
     </table>
</div>

我正在寻找解决问题的方法，而这可能不是我尝试解决的方法。因此，如果有人可以帮助我以最好的方式做到这一点。

问题：

我有以下输入字段：

 <input type="text" placeholder="quote" ng-model="person.quotes.quote">
 <input type="text" placeholder="author" ng-model="person.author">
 <input type="text" placeholder="category" ng-model="person.category">

我有以下对象：

$scope.person = {
author: $scope.author,
category: $scope.category,
quotes: [{quote: $scope.quote}]
};

我试图将值person.quote放入引号数组中。但是我似乎做不到。

原因：

我这样做的原因是，当用户填写输入字段并单击按钮时，值将保存到$ scope.person对象中。然后将整个对象推送到我的Firebase API。我想保持我的$ scope.person对象的结构，就像我在javascript中描述的那样，也就是我的Firebase API中的结构。我可以轻松推送作者和类别，但嵌套的引号对象却没有被推送。

我得到的错误：

错误：Firebase.set失败：第一个参数包含未定义的属性“ quotes.0.quote”

在此先感谢您，如果此信息还不够，请告诉我，以便我提供更多信息。

我对AngularJS指令有很好的理解,但我认为我的指令缺少一些东西.

出了什么问题:在初始页面加载时,ngModel被正确触发,我成功接收数据,并在输入中建模.

我做的一切......都行不通.如果我修改输入中的文本,则不会更新模型.

请注意,如果我不使用指令(直接HTML),它可以正常工作.


我有一个这样的指令:

.directive('defaultFormGroup', function () {
    return {
        restrict: 'A',
        templateUrl: 'form-group.html',
        replace: true,
        scope: {
            uniqueId: '@',
            labelTitle: '@',
            placeholderText: '@',
            ngModel: '=',
            bsLabelClasses: '@',
            bsFormControlClasses: '@'
        }
    };
})

该指令的模板:

<div class="form-group">

    <label class="{{bsLabelClasses}} control-label text-left" for="{{uniqueId}}">{{labelTitle}}</label>

    <div class="{{bsFormControlClasses}}">
        <input type="text" class="form-control" id="{{uniqueId}}" placeholder="{{placeholderText}}" data-ng-model="ngModel">
    </div>

</div>

以下是我在模板中调用指令的方法:

<div data-default-form-group 
     data-label-title="Name" 
     data-placeholder-text="Name" 
     data-unique-id="name" 
     data-bs-label-classes="col-sm-2 col-md-2" 
     data-bs-form-control-classes="col-sm-3 col-md-3" 
     data-ng-model="site.name">
</div>

单选按钮也有同样的问题:

.directive('radioSwitch', function () {
    return {
        restrict: 'A',
        templateUrl: 'radio-switch.html',
        replace: true,
        scope: { …

我试图渲染一个表示时间戳的<input type="datetime-local>字段ng-model:

<input type="datetime-local" ng-model="object.value">

同

$scope.object.value = 1433109600000;

控制台显示[ngModel:datefmt]错误.

如何正确绑定$scope.object.value到输入字段？(时间戳来自nestest对象中的Web服务)

一些Plnkr:http://plnkr.co/edit/TGpKVNF1tv0b1h6JPBT8？p = preview

伙计我是角色的新手,并且在从ng-repeat内部获得ng-model的价值时遇到了问题.

我有一系列用户,我想指定具有不同访问级别的用户

users = [
{id:1, level:0},
{id:2, level:0},
{id:3, level:0}
]

这是HTML

<div ng-repeat="user in users track by $index">
{{user.id}}-
<select name="appoint" ng-change="appoint(user.id)" ng-model="appointLevel">
   <option value=0>Revoke</option>
   <option value=1>Moderator</option>
   <option value=2>Admin</option>
 </select>
</div>

的appoint()在角函数:

$scope.appoint = function(id){
    console.log(id+' '+appointLevel)
  }

该函数工作正常,我得到的值id不是触发该函数的输入元素的`appointmentLevel'.

如何在"ng-change"上有效地获得值console.log(id +''+ appointmentLevel)？提前致谢.

我使用Angular Material创建了一个表单,该表单使用下拉列表从book具有名称和ID 的对象数组中进行选择,最终目的是将其交换到我的集合中的另一本书.这是我的典型交易对象的样子:

var tradeItem = {
  wanted: {
    user: 'barryjohnson',
    bookId: 'foo1bar2'
  },
  offered: {
    user: 'dangraham',
    bookId: 'bar7baz8'
  },
};

我想将整个对象保存到我ng-model的选择菜单中,所以我希望ng-repeat引用整个数组对象.这样我就可以对我的数据库做一个简单的后续请求.

目前它只保存标题,这是我md-option标签内的标题.

这是我的观点:

md-dialog(aria-label='Trade', ng-cloak='')
  form
    md-toolbar
      .md-toolbar-tools
        h2 Propose a Trade
        span(flex='')
    md-dialog-content(style='max-width:800px;max-height:810px; ')
      .md-dialog-content
        p Which of your books would you like to trade for '{{userClickedBook.title}}'?
        p {{selected}}
        md-input-container.md-block
          label(for="mySelect") Your Books
          md-select(name="mySelect", ng-model='selected')
            md-option(ng-repeat="book in usersBooks") {{book.title}}
        div(layout='row')
          md-button(ng-click='cancelDialog()', style='margin-right: 20px;') Cancel
          md-button.md-primary(ng-click='save()', ng-disabled='myForm.$invalid', layout='', layout-align='center end') Ok

那么,我如何绑定整个对象,这 …

我有点困惑.使用ngModel我可以执行以下操作:

import {NgModel} from "angular2/common";
@Component({
  selector: "test",
  template: `<input tpye="text" [(ngModel)]="strInObj.str">  {{strInObj|json}}`,
  directives: [NgModel]
})
class Test{
  strInObj: {str: string} = {str: "this is a string"};
}  

现在当我输入输入时,strInObj.str会更新.我对此感到困惑,因为据我所知,字符串是不可变的,并且无法找到引用的父级.

在这种情况下,我str直接传递属性,这意味着ngModel获取对字符串的引用.如果它"更改"该引用上的字符串,则会创建一个新字符串,因此不会更改strInObj.str指向的原始字符串.至少这是我的理解.
并且没有办法找到传递给ngModel的引用的父级(没有概念str.parent(),会返回strInObj)那么他们如何做到这一点？我试图理解ts和js的来源,但是......好吧,我在这里.

我试图建立一个类似的指令,但最终只能传递包裹字符串的对象,我没有找到一种方法来修改原始对象str直接传递属性....(在示例中,我将传递strInObj给我指令,然后将使用str传递的对象的属性,这工作正常).

如果有人能帮我解开这个,我会很高兴:)

编辑 在这个plunker中,我有自定义指令StrDirective和带有NgModel指令的输入字段.两者都具有相同的绑定exampleStr,在简单的范围内输出.
现在,当我在输入中输入文本时,您可以看到exampleStr正在更新.这是预期的行为.我知道这很有效.
该StrDirective更新的时候点击约束力.您可以看到它更新了字符串的"工作副本",但exampleStr没有更新.
我现在的问题是:他们是如何做到的/我怎样才能让我的指令更新ExampleStr而不必将其包装在对象中？