【问题标题】:Angular.js CheckboxesAngular.js 复选框
【发布时间】:2019-04-03 19:15:54
【问题描述】:

我正在尝试使用复选框和 Angular 1.x 做一些非常简单的事情。我想在编辑页面上预先选择一些复选框,然后在进行一些选择后将数据保存到后端。

我已经创建了这个演示:

http://jsfiddle.net/roL38ctk/3/

我可以预先选择复选框,但我很难看到所选项目或任何用途以及如何保存到数据库中,例如在检查和取消检查我的 ng-model 可能的选项之后看起来像这样:

{"300":false,"400":true}

保存时我需要知道已选择的 id,我不需要或不希望知道复选框的状态。比如:

{300,305,310}

在我看来,Angular 似乎不能很好地处理复选框,而无需将对象组合在一起以提取和处理准备保存的数据。

作为指南,我使用了http://embed.plnkr.co/g0NMG4rmF4uwzoG2uZhf/preview,我认为这是有信誉的来源并声称是 Angular 方式?我不相信当 PHP 框架毫不费力地管理这些东西时,一些基本的东西会如此繁重。我哪里错了?

【问题讨论】:

  • 为什么要使用新数组?为什么不在每个类别数组中设置“已检查”属性并将复选框绑定到该属性?类似this forked fiddle from yours
  • @Gonzalo.- 谢谢,但虽然你的 fork 给了我 ID,但我无法将对象保存到我的数据库中,除非先循环对象以提取数据。不可能只有一个 id 对象吗?

标签: angularjs checkbox


【解决方案1】:

只需将此代码放入您的提交函数中。你会得到你期望的值:

    var arryList=[];
        angular.forEach($scope.selection.ids, function (val, key) {
                        if(val==true){
                    var vd = key;
                    arryList.push(vd);
                    }
                });
 alert(arryList);

或者你可以使用 angularjs 材质复选框Check here。

第三次演示已经满足你的要求了。

【讨论】:

  • 我将此答案标记为解决方案,因为需要第三方库,尽管我选择使用 Checklist-model 因为它更轻一些 - 需要一个文件。 Angular Material 在我看来有点重,需要 4 个文件,并且用户界面很糟糕
  • 如果你使用 angularjs ui 路由,那么 ui 不会很重,因为所有库只加载一次到整个会话。
猜你喜欢
  • 2015-11-21
  • 2015-01-14
  • 2015-03-29
  • 2014-05-25
  • 1970-01-01
  • 1970-01-01
  • 2015-02-09
  • 2017-05-03
相关资源
最近更新 更多