使用 ng-model 命名数组

2024-01-02

我有一个添加按钮,它使用指令添加到表的(.estimates)tbody:

function EstimateCtrl( $scope, $compile ) {

    $scope.services = [
            { 'value': 'c', 'name': 'Standard Courier' },
            { 'value': 'xc', 'name': 'Express Courier' },
            { 'value': 'cc', 'name': 'Country Courier' }
    ]

    $scope.add = function() {

        angular.element('.estimates tbody').append( $compile('<tr estimate></tr>')($scope) );

    }

}

angular.module('dashboard', [])
    .directive('estimate', function() {

        return {

            restrict: 'A',
            template: '<td><input type="text" placeholder="Suburb"/></td><td><select ng-model="estimate.service" ng-options="service.value as service.name for service in services" class="form-control"></select></td><td>$0.00</td><td><button type="button" class="remove">x</button></td>',
            link: function( scope, element, attrs ) {

                element.find('.remove').bind('click', function() {

                    element.closest('tr').remove();

                });

            }

        }

    });

如何在 angularjs 中使用 ng-model 获得元素数组?例如:

<select name="foo[]"></select>

to

<select ng-model="foo[]"></select>

我已经挖了一天半了,但似乎无法休息。我希望也许有人能指出我正确的方向。非常感谢您的帮助。


Edit:这是指向 plunker 的链接,我相信看到这个后每个人都会知道我在说什么:http://plnkr.co/edit/JlYB9P0vyAqghOmeNYh4 https://i.stack.imgur.com/sDDHZ.png


Edit2:让我们看看我是否可以给你们再举一个例子来告诉你们我想要什么

<form method="POST" action="">

<!-- I was attempting to do ng-model="estimate.service[]" but of course this doesn't work -->
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>

<input type="submit" value="Submit"/>

</form>

<?php

if ( $_POST )
{

    print_r( $_POST['estimate']['service'] );

}

?>

Output


噢,天哪!我设法找到了解决办法。

我已经放弃了指令并采用了另一种方式,这是我的工作代码:

HTML:

<div ng-controller="Ctrl">
    <table>
        <tbody ng-repeat="service in estimate.services">
            <tr>
                <td><input type="text" placeholder="Suburb"/></td>
                <td>
                    <select ng-model="estimate.services[service.name]" ng-options="option.value as option.name for option in options" class="form-control"></select>
                </td>
                <td>$0.00</td>
                <td><button type="button" class="remove">x</button></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript:

function Ctrl( $scope, $compile ) {

    $scope.estimate.services = [
        { name: 'service1', value: '' }
    ];

    $scope.options = [
        { name: 'Option 1', value: 'opt1' },
        { name: 'Option 2', value: 'opt2' },
        { name: 'Option 3', value: 'opt3' }
    ];

    $scope.add = function() {

        $scope.estimate.services.push({
            name: 'service' + ($scope.estimate.services.length + 1),
            value: ''
        });

    };

}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ng-model 命名数组 的相关文章

随机推荐

  • ODBC 和 OleDB 有什么区别?

    我在这里找到了这个问题 OLEDB 与 ODBC https stackoverflow com questions 271504 oledb v s odbc 这给了我更多信息 但并没有真正回答我要问的问题 所以我将从那里开始 我正在使用
  • React 和 Material-UI:使用 TypeScript 在 createStyles() 中未定义主题

    我正在学习 React with TypeScript 并使用 Material UI 框架作为前端 我尝试让媒体查询正常工作 但出现错误 未捕获的类型错误 无法读取未定义的属性 up 在样式 webpack internal app co
  • SQL 查找查询结果的大小

    所以基本上我正在执行 SQL 选择查询 但我想知道我要撤回多少数据 多少千字节 实际上 显示客户统计数据 http blog sqlauthority com 2009 10 01 sql server sql server managem
  • 为什么 ActionDispatch::Routing::RouteSet 需要这么长时间

    我在 Rails 4 2 1 之上使用 Grape 为我们的应用程序提供 API 但是当我今天检查 Newrelic 的性能时我发现RackApp Proc call and Grape API Root call占用了大量的时间 见截图
  • 在 Mathematica 中使用 MapAt 中的 All

    我经常有一个成对的列表 例如 data 0 0 0 1 12 4 2 14 6 3 25 1 我想做点什么 例如Rescale 到所有第二个元素而不触及第一个元素 我知道的最巧妙的方法是 Transpose MapAt Rescale Tr
  • Sharepoint 2007 和

    问候 我试图让我的 Sharepoint 2007 网站在 IE 中浏览时以标准模式呈现 由于 DOCTYPE html 使我可能担心的每个浏览器都能做到这一点 所以我决定使用它 我到处读到 标准模式可能会导致某些 OOTB 功能和样式 弹
  • 将多个组件绑定到支持 bean 中的一个实例(Primefaces 树)

    我希望能够在我的页面上的 2 个位置拥有 Primefaces 树 原因是我想让具有相同数据的两棵树具有完全相同的状态 相同的节点展开等 我尝试将两个实例绑定到支持 bean 中的相同值 但这会导致仅渲染其中一个实例 我做错了吗 这应该以不
  • Erlang JSON 库:序列化性能?

    Erlang 有许多可用的 JSON 库 但我不清楚哪些具有最佳性能特征 其次是易用性 特别是对于 erlang to json 序列化 我的用例需要 JSON 解析和序列化 但 Erlang 代码可能会产生比接收输入至少多两个数量级的 J
  • spring form taglib禁用属性真的必须解析为字符串吗?

    我最近一直在研究 spring 表单标签库 并遇到了一个相当令人不安的现象
  • 使用 .net MySql 连接器未关闭 MySql 连接

    MySql 连接将进入睡眠模式而不是在 mysql 中关闭 我正在使用 MySql Data 6 5 4 版本与 mysql 进行通信 我不确定下面的代码中我做错了什么 try using var conn new MySqlConnect
  • 如何拦截 cypress 的服务器端 api 调用

    我使用 Nuxt js 作为前端框架 使用 Laravel 作为 API 服务器 并使用 Cypress 编写一些 e2e 测试 我试图通过使用减少 asyncData api 调用cy 拦截 https docs cypress io a
  • POSTMAN:无法完成OAuth2.0登录

    我想请求一个令牌 以便我的 Postman 可以登录我的 Gmail 帐户 然后我可以调用 Google Cloud API 我正在尝试输入我的 Gmail 电子邮件地址及其密码 如您从这张图片中看到的 最终目标是获得这样的 API htt
  • 无法让多页jquery mobile与谷歌地图一起使用

    我有 jQuery Mobile 与谷歌地图一起使用 这样我就可以显示一个独立的页面 其中包含一张占据全屏的地图 但是 我不知道如何制作一个简单的两页示例 其中有一个按钮可以将我带到地图 我很困惑为什么所有示例的正文标签中都有 javasc
  • 为什么我的解决方案无法找到二叉树的最小深度?

    我不明白我的寻找二叉树最小深度的解决方案为什么不起作用 我究竟做错了什么 如果您好奇 这里有一个问题的链接 https leetcode com problems minimum depth of binary tree submissio
  • 如何将我的本地主机指向公共IP地址[关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 我刚刚设置了一个WAMP 2 2 localhost在我的电脑上 我的一切都运行正常 我可以执行 PHP MYSQL 等 现在我想知道如何将我的本地主
  • 有哪些库可帮助创建手机 2D Java 游戏?

    我想开始为手机开发 2D Java 游戏 在 J2ME 上 因此我想知道是否存在任何库或 引擎 来帮助完成各种图形任务 用像素字体绘制文本 为具有多个帧的精灵绘制位图 如动画 GIF 使用代码 线条 贝塞尔曲线 洪水填充和绘制图形渐变填充
  • 操作系统中的共享内存段

    共享内存属于哪里 这意味着它由每个单独的进程拥有 如堆栈和堆 所以 其他程序不能 能够访问其他程序的堆栈 或者它是由任意数量的进程使用的公共内存段 这 下图以图解方式显示了我的问题 图1 stack stack stack Shared m
  • 链接 clang-llvm

    我一直在使用 clang llvm 开发一个小工具 但我无法成功让 g 和 gnu 的链接器将我的代码与 clang 正确链接 我的链接器生成以下错误 undefined reference to clang FileManager Fil
  • 在 Heroku Server django 上安装 poppler

    我正在尝试安装poppler在我的 Heroku 服务器上 因为我正在使用pdf2image作为一个Python包 然而 我不能就这么跑brew install poppler就像我在 Mac 上所做的那样 我尝试从互联网上添加一些 Her
  • 使用 ng-model 命名数组

    我有一个添加按钮 它使用指令添加到表的 estimates tbody function EstimateCtrl scope compile scope services value c name Standard Courier val