在 AngularJS 中的 ng-repeat 中使用 ng-model 进行绑定

2024-01-23

我正在尝试将模型“用户”绑定到输入字段列表。我事先不知道这些字段,所以我必须编写通用代码来根据字段设置表单。

<script>
    function MyController($scope){
        $scope.fields  = ['name','password','dob'];
        $scope.user1 = {name:"Shahal",password:"secret"}
    };
</script>
<div ng-app ng-controller="MyController">
    <ul>
        <li ng-repeat="field in fields">
            <label>{{field}}</label><input type="text" ng-model="user1.{{field}}">
        </li>
    </ul>
    <pre>{{fields}}</pre>
</div>

我正在尝试循环遍历字段并显示每个字段的输入字段(在范围内可用)。但绑定不正确,因为我正在尝试评估 ng-model 内的表达式。

基本上我试图显示 3 个输入字段(名称、密码、出生日期),并将对象 user1 附加到相应的字段。

这是fiddle http://jsfiddle.net/CYPJ3/

有什么帮助吗?


下面就解决你的问题

<script>
    function MyController($scope){
        $scope.fields  = ['name','password','dob'];
        $scope.user1 = {name:"Shahal",password:"secret"}
    };
</script>
<div ng-app ng-controller="MyController">
    <ul>
        <li ng-repeat="field in fields">
            <label>{{field}}</label><input type="text" ng-model="user1[field]">
        </li>
    </ul>
    <pre>{{fields}}</pre>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 AngularJS 中的 ng-repeat 中使用 ng-model 进行绑定 的相关文章

  • 如何使用 $resource 获取状态代码?

    我提出请求的工厂在这里 angular module myapp factory testResponse http resource AppConfig routeParams rootScope function http resour
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 打开 md-calendar 时滚动到当前日期

    目前正在构建一个使用 Angular Material 的应用程序 我们需要一个 md calendar 组件 我们想要自定义按钮样式和内容 因此不使用普通的 md datepicker 问题是 当 md calender 打开时 滚动位置
  • 了解 sort() 比较函数

    我正在使用一个电子商务平台 该平台无法重新排序产品属性字段的选项 这真的很糟糕 因为要插入新选项 您几乎必须删除所有现有选项并重新开始 我正在尝试在客户端进行操作 这是我正在处理的内容 这是针对鞋码的 9 EE 9 1 2 EE 10 EE
  • 以一定时间间隔连续重复运行 JavaScript 函数

    这是我的第一个问题 希望您尽快回答 我想要代码连续重复一个函数 我尝试了一些代码 但没有成功 我尝试了这段代码 我想在一段时间后重复这个功能 我努力了setInterval and setTimeout 但是 我还没有收到结果 这将重复该任
  • Web 组件 - 服务/非 html 组件

    所以我来自 Angular 想看看如何创建vanilla Web components 现在 从 Angular 开始 我们倾向于将事物分开 组件 充当 HTML CSS 和一些 javascript 然后是 服务 主要负责收集数据和执行不
  • 如何以编程方式退出或关闭 Javascript UWP 应用程序? (Windows 10)

    我制作了一个游戏 它需要自己的退出按钮 我无法使用CoreApplication Exit https msdn microsoft com en us library windows apps windows applicationmod
  • 将文本大小调整为矩形 在 Canvas HTML5 中调整大小

    我是 Canvas 新手 我正在创建一个网站 以在调整矩形大小时增加文本 我尝试了很多 但没有任何效果 实际上 我希望如果我仅按其宽度调整矩形大小 向左拉伸 向右拉伸 则仅应增加文本宽度而不是字体大小 我已经完成了字体大小 但发现增加孤立文
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • jQM / jquery-collagePlus 使用问题

    我正在使用 jQM 构建应用程序 并且尝试使用 jquery collagePlus http ed lea github io jquery collagePlus http ed lea github io jquery collage
  • 如何调用 google 的 getBasicProfile() 来仅单击按钮即可登录 google?

    我在我的网站上使用谷歌登录
  • JavaScript 测验在提出所有问题之前结束

    我现在正在学习 JavaScript 并且正在创建一个测验 我的测验运行正常 控制台中没有任何错误 但它会跳过问题 有时会在回答所有问题之前结束测验 即使给出正确答案 也会减少时间 我不太确定为什么它会这样做 因为在我看来它的编码是正确的
  • 在管道中重用变量的功能方式

    在 javascript 和 typescript 中与 Ramda 一起使用函数式编程 我经常发现自己编写如下代码 const myFun c gt const myId c id const value pipe getAnotherO
  • 在 React Navigation 中将 props 传递给自定义抽屉导航器

    在反应导航抽屉菜单中 我想显示用户名 John Doe 它处于我的主要组件的状态 Router 我怎样才能将自定义抽屉内容组件传递给它 额外信息 我从 AsyncStorage 中获取此名称 组件已挂载 这是我的代码 export defa
  • Google 地图 API:忽略 DirectionService 请求中的季节性限制

    我目前正在开发一张地图 其中显示两点之间的最短路线 使用不同的交通工具 我注意到 有时 例如在冬季关闭的道路不会被考虑在内 我发现我可以使用方向服务 下面的代码 忽略高速公路 收费站和渡轮 但我一生都无法弄清楚如何 是否可以忽略季节性限制
  • 计算文本选择的 xy 位置

    我正在尝试使用 DOM 元素创建自己的文本选择 是的 我的意思是当您在此元素中选择文本时 您会在文本后面看到蓝色背景 这个想法是停止默认行为 蓝色 并使用我自己的元素来完成工作 方法是找到选择的 xy 位置 然后放置绝对定位的元素 我希望能
  • mozilla pdf.js 没有全视图

    我喜欢这个 pdf 查看器https github com mozilla pdf js https github com mozilla pdf js Demo http mozilla github com pdf js web vie
  • 无法使用 Ninject 将依赖项注入到从 Angular 服务调用的 ASP.NET Web API 控制器中

    我将 Ninject 与 ASP NET MVC 4 一起使用 我正在使用存储库 并希望进行构造函数注入以将存储库传递给其中一个控制器 这是实现 StatTracker 接口的上下文对象 EntityFramework public cla
  • 使用 JQuery 根据下拉列表选择的值显示/隐藏控件

    我正在尝试使用 JQuery 根据下拉菜单的选定索引显示 隐藏 div 标签 但它不起作用 任何帮助将不胜感激 Thanks

随机推荐