如何从ng-grid获取单元格值

2023-12-10

我是 AngularJS 的初学者。我研究了ng-grid的demo,有一个问题。

索引.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MyCtrl">
    <div class="gridStyle" ng-grid="gridOptions"></div>
    <div class="selectedItems">{{mySelections}}</div><br><br>

</body>

</html>

app.js

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.mySelections = [];
$scope.myData = [{name: "Moroni", id: 1},
                 {name: "Tiancum", id: 2},
                 {name: "Jacob", id: 3},
                 {name: "Nephi", id: 4},
                 {name: "Akon", id: 5},
                 {name: "Enos", id: 6}];
$scope.gridOptions = { 
data: 'myData',
selectedItems: $scope.mySelections,
multiSelect: true 
};

//$scope.mySelections_id = $scope.mySelections.length;

});

当我选择第一行时,selectedItems 的 div 将显示 [{"name":"Moroni","id":1}]。结果没问题。如果我只想获取所选行中单元格[id]的值,如何修改我的代码?

这是Plunker


Use the afterSelectionChange将所选内容中的 id 提取到另一个数组的回调。

$scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: true,
    afterSelectionChange: function () {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function ( item ) {
        $scope.selectedIDs.push( item.id )
      });
    }
  };

现在你可以参考{{selectedIDs}}来自模板并包含所有选定的 ID。或者只是第一个:{{selectedIDs[0]}}

请参阅此处的工作示例:http://plnkr.co/edit/xVwVWX

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

如何从ng-grid获取单元格值 的相关文章

  • Angular 1.0.8 $resource 具有多个可选的获取参数

    我的学生 url 如下所示 var Student resource app student studentid courseId studentid id courseId cid 当我不带参数调用它时 我希望 url 为 app stu
  • Angularjs 手表服务对象

    为什么我无法观看服务中的对象 我有一个简单的变量可以工作 但是一个对象不能工作 http plnkr co edit S4b2g3baS7dwQt3t8XEK p preview http plnkr co edit S4b2g3baS7d
  • Swagger 生成 javascript-closure-angular-client

    我是 swagger 的新手 我从 swagger 的在线编辑器生成了一个 javascript 闭包角度客户端 它给了我一个 DefaultAPI js 和其他与我的对象定义匹配的 JS 文件 我在 swagger 文档和网上搜索了一种在
  • 从指令动态地将角度属性添加到元素

    我正在尝试构建一个指令来更改缓慢的 ajax 调用按钮上的加载状态 基本上 这个想法是为按钮元素设置一个属性 ng loading 并让指令添加其余的内容 这是html代码
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • Protractor+AngularJS+Jasmine - 测试按住项目

    AngularJS 和 Protractor 非常新 但我认为到目前为止我正在朝着正确的方向前进 我的网站有一个项目列表 当您单击该项目并按住 X 秒时 它会打开一个模式窗口 我如何在 Protractor Jasmine 中模拟这种行为
  • 使用 JS 在 Angular 中创建删除按钮的确认警报

    我有一个带有删除按钮的表单 我想创建一个单击删除按钮时弹出的确认框 删除按钮当前有效 我在 javascript 中尝试了一些方法 但没有成功 我正在使用角度 这是最好的方法吗 另外 有谁知道这方面的任何例子 我还没有找到任何有效的例子 d
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 如何制作没有 ng-repeat 的模板并使用 Angular-drag-and-drop-lists 将数据传递到 $scope?

    我想用角度拖放列表 https github com marceljuenemann angular drag and drop lists使用我自己的网格模板到所见即所得编辑器 如何构建我自己的 HTML 模板而不需要ng repeat因
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化
  • AngularUI 可排序不适用于多个应用程序

    我创建了带有可排序列表的 angularjs 应用程序 我的应用程序可以与其他不同的应用程序一起多次包含在页面中 每个角度应用程序都是独立的用户控制 var myapp angular module myapp ui myapp contr
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • 禁用在 django Rest Framework 中创建嵌套对象

    Hi 你能帮我怎么做吗禁用创建嵌套对象 我有这样的序列化器 员工拥有团队的外键 class TeamSerializer serializers ModelSerializer class Meta model Team fields id
  • 是否可以在 ASP.NET Web API 和 SPA 中使用基于 cookie 的身份验证?

    我想创建基于 angularjs 前端和 ASP NET Web API 的 Web 应用程序 我需要创建安全 api 但我无法在将实施此 Web 应用程序的公司服务器上使用基于令牌的身份验证 是否可以对 SPA 和 ASP NET Web
  • 切换按钮不适用于 AngularJS 和 Angular ui Bootstrap

    切换按钮出现 但不起作用 我现在在网上也有相同的代码 但它不起作用 但在 Plunker 中它可以工作 Plunker 切换按钮正在工作 http plnkr co edit R5F5D1FGyHiv9X1cfOoa p preview 在
  • Typescript:如何在自定义过滤器中使用角度 $filter

    如何在自定义过滤器中使用 Angular filter 如何注入 filter依赖 module Filters export class CustomFilter public static Factory return function
  • 离子旋转器未显示

    我用 http 请求填充 Ionic 集合重复列表 但我不想将所有内容直接加载到 DOM 中 因此 我只显示其中一些项目 并在您向下滚动时添加其余项目 为此我实现了无限滚动功能 当我到达页面底部时 它应该显示一个旋转器 但它没有 这些物品至
  • 如果特定 stateParam 为空,如何重定向到 state

    我不确定我这样做的方式是否正确 任何建议将不胜感激 我有一个餐厅选择器 用户可以从中选择一家餐厅 然后所有其他子状态加载特定于所选餐厅的内容 但我需要默认选择一个子状态 包括一家餐厅 它将根据用户最近的位置或 cookie 数据 如果他们之
  • 测试 AngularJs 的 $http.defaults.headers.common 是否设置了特定标头

    所以我对 JavaScript 和 AngularJS 的世界还是个新手 因此我的代码还没有达到应有的水平 但它正在改进 尽管如此 我开始学习并实现一个带有 REST 后端的简单登录页面 提交登录表单后 将返回一个身份验证令牌并将其设置为默
  • angularjs:timeout 在 $http POST 请求中不起作用

    我的代码中有以下代码片段 它为请求设置了以毫秒为单位的超时 但即使满足超时 它也不会取消 var httpURL method URLobj method url urlString data data withCredentials tr

随机推荐

  • 使用 Unicode emoji 动态创建 NSString

    我有字符串 Hi there U0001F603 它正确显示了表情符号 例如Hi there 如果我把它放在UILabel 但我想像这样动态创建它 NSString stringWithFormat Hi there U0001F60 ld
  • 了解分支预测

    有一些关于分支预测的疑问我无法自信地弄清楚 假设我必须使用静态分支预测器 分支预测应该发生在管道的哪个阶段 如何知道预测出错了 数据路径如何知道发生了错误预测 如果它知道发生了错误预测 它如何发送信号以占用未占用的分支 出了问题后 我必须占
  • 在通过代码连接的两个表之间使用更新时出错

    是以下 python pandas DataFrame ID country money code money add other time 832932 Other NaN 00000 NaN N2 N2 N4 0 days 01 37
  • 如何使用值从字典中删除条目

    我有一个字典集合如下 mydic addvalue key1 val1 mydic addvalue key2 val1 mydic addvalue key3 val1 mydic addvalue key4 val2 mydic add
  • 从嵌入式网络聊天发送事件

    我正在尝试从嵌入式网络聊天发送和接收事件 该网络聊天遵循本示例中的网站代码https github com ryanvolum backChannelBot并且机器人实现了来自的代码Bot框架获取内嵌聊天控制页面的ServiceUrl埃泽奎
  • Java - 冻结鼠标

    有没有办法在Java中将鼠标锁定在一个位置一段时间 我试过这个 while timer true Robot bot new Robot bot mouseMove x y 但是 当用户移动鼠标时 它会令人不愉快地来回跳跃 从用户拖动的位置
  • .Net Mvc:如何触发 Application_Error() 管理它们的错误?

    我管理我的所有应用程序错误Application Error in 全局 asax protected void Application Error object sender EventArgs e Exception exception
  • 以编程方式关闭设备

    我正在编写一个应用程序 旨在在一种特定的设备型号 运行基于 Amlogic 的固件的 Android 机顶设备 上运行 我具有 root 功能 并且我的应用程序是使用固件证书签名的 我的应用程序是设备的主要焦点 如果能够启动完全关闭电源将会
  • 对父级之后的每个子级进行排序

    我有一个这样的数组
  • 在Javascript中获取多维数组中元素的坐标[重复]

    这个问题在这里已经有答案了 我想在多维数组中放置一个元素 如下所示 var letterVariations 0 1 2 3 4 5 6 7 8 9 A a B b C c D d E e F f G g H h I i J j K k L
  • 在 vuejs 应用程序中运行时 axios 响应标头丢失数据

    我有简单的 vuejs 应用程序 在 main js 中我有类似的内容 import Vue from vue import App from App vue import router from router routes import
  • Jenkins pipeline sh 在 Windows 上失败并显示“无法运行程序 nohup”

    我有 Windows 10 我想使用 bash for Ubuntu for Windows 从 Jenkins 管道执行 Jenkinsfile 中的 sh 命令 但它不起作用 我的 Jenkins 管道有以下阶段 stage sh ho
  • Firebase 深层链接 Web URL 查询为空 - iOS

    我在接收带有新自定义网址的 Firebase 动态链接时遇到问题 我创建了一个 abc0 page link 我设置了所有内容以从应用程序的代码中创建它 但是在接收时 我在日志中收到以下消息 Firebase Analytics I ACS
  • Java 自动完成文本字段(Ajax 风格)

    我需要创建一个 JTextField 或任何可以输入内容的组件 并且它必须提供动态填充值的列表 当我输入新字符时 命题会更新 就像 Ajax 一样 一个特殊性是用户只能选择已填充的值 我需要让我的用户从数据库中选择现有城市 使用 Swing
  • 如何创建强类型 BeginForm?

    我见过一些使用 HTML BeginForm 语法的例子 Html BeginForm
  • Woocommerce 单一产品自定义选项卡上显示带有所见即所得字段的元框

    需要在单个产品页面上显示相关产品中的自定义字段 我想添加一个元框到Add New Product字段并在评论下的单个产品页面上的自定义选项卡上显示结果 我尝试使用代码 但页面上没有显示任何内容 添加额外的产品选项卡可以帮助我添加额外的信息
  • MS Word Viewer C# .NET 自动化

    是否可以自动化执行以下操作 引用 MS Word Viewer 以编程方式打开文档然后打印它 理想情况下是 C 我猜如果可以打开它 那么很可能可以打印它 我尝试在 Visual Studio 中添加对 COM 对象的引用 MS Office
  • 如何根据“收件人”电子邮件地址在 VBA 中过滤 Outlook 视图

    我在 Outlook 中有一个视图 其中包含邮箱中的 发件人 和 收件人 电子邮件 我可以非常轻松地在 Outlook 搜索框中输入电子邮件地址 视图将立即被过滤以显示来自该电子邮件地址的所有电子邮件 也许还包括主题或正文中包含此电子邮件地
  • 获取客户端的IP地址和计算机名称?

    我有一个 ASP Net 4 0 应用程序 发布在公司 Intranet 网络的 IIS 7 0 服务器上 我想将客户端的 IP 地址保存在我的数据库中 所以我想获取客户端的IP地址和计算机名称 我尝试了互联网搜索的方法 但我得到 服务器
  • 如何从ng-grid获取单元格值

    我是 AngularJS 的初学者 我研究了ng grid的demo 有一个问题 索引 html