当前位置: 首页 > 面试题库 >

AngularJS如何绑定多个输入的方法是什么?

李振国
2023-03-14
问题内容

我正在学习angularjs,我希望能够让用户输入许多输入。输入这些输入后,list数组元素应相应更改。我想尝试使用ngRepeat指令,但我读到它由于创建了一个新作用域而无法进行数据绑定:

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item" type="text"/>
</div>

我想知道是否应该使用自定义指令来执行此操作或以其他方式处理它。


问题答案:

如果您list是对象数组(而不是基元数组),那么会更好。即使使用创建了新作用域,此方法也能正常工作ng-repeat

<div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text"/>
</div>

使用以下控制器:

function TestController($scope) {
    $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
}​

请参阅此小提琴作为示例。

另一方面,如果您尝试绑定到字符串数组,则新作用域将引起问题,因为您要修改的值将不会绑定到原始数​​组字符串基元(如该小提琴示例中所示)。



 类似资料:
  • 我可以使用以下代码轻松地将数据绑定到div或pre标记: 但是,我想尝试将此数据绑定到隐藏表单输入,我尝试了: 这将返回以下错误: 所以很明显,在使用ng模型时,我不能使用| json。角度文档仍然有点稀疏,我似乎无法找到如何正确分配它,即使我可以?谢谢:) 我需要将这个json数据加载到我的金字塔应用程序中,并将其分配到一个隐藏的表单字段中,这似乎是最好的方法,或者我应该以另一种方式来做?

  • 在我的项目中,我使用slf4j和logback作为后端日志记录框架,但是有很多依赖项使用log4j作为日志记录框架,所以发现slf4j有多个绑定,我该如何处理呢?如果我排除了不想要的slf4j-log4j依赖项,框架或库本身会正确地处理日志记录吗?

  • 本文向大家介绍AngularJS动态绑定HTML的方法分析,包括了AngularJS动态绑定HTML的方法分析的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了AngularJS动态绑定HTML的方法。分享给大家供大家参考,具体如下: 在Web前端开发中,我们经常会遇见需要动态的将一些来自后端或者是动态拼接的HTML字符串绑定到页面DOM显示,特别是在内容管理系统(CMS:是Content

  • 问题内容: 如何创建绑定到一个并使用(已完成)输出两个字段的指令。从本质上讲,我 从模型到输入 工作都有一个方向,而 从输入到模型却 没有另一方向。如何实现呢? 我有这个HTML: 和一个模型: 边注; 我创建了一个过滤器来拆分这两个值: 而这个指令: 问题答案: 正确的方法(IMO)是按照此处所述创建自定义控件。 作为练习,我在此提琴中实现了它:http : //jsfiddle.net/6cn

  • 问题内容: 实际上,我有一个xml文件和多个xsl文件(C:/ Users / santhanamk / Desktop / newxslt / Xslt输入/ xsl列表)。当我将xml和xsl0作为输入时,我需要以字符串形式获取输出。因此,在获得输出之后,我需要为xsl1提供与输入字符串相同的输出,以获取另一个输出(字符串)。然后,我需要将输出作为xsl2的输入字符串,以获取另一个输出。当给定

  • 我在Visual Studio 2017中构建了以下简化的Azure功能代码: 我已经在本地文件中添加了一个键“AzureWebJobsConnectionString”。设置。用于开发测试的json。但是,调试时我收到以下错误消息: 错误索引方法“FunctionApp. Run”Microsoft. Azure. WebJobs. Host:错误索引方法“FunctionApp. Run”。M