【问题标题】:How to pass check box values in AngularJS using ng-model in conjunction with ng-repeat如何使用 ng-model 和 ng-repeat 在 AngularJS 中传递复选框值
【发布时间】:2015-11-03 16:55:24
【问题描述】:

我有一个页面,用户可以通过输入搜索词来搜索文章,并在需要时过滤结果。

过滤器最初包含多个选择框,其中的值是从 ajax 调用中获取的,并且选择的值是使用 ng-model 发回的。它工作正常。

现在的要求是将多个选择框转换为复选框,我已经设法创建了复选框。

当用户输入搜索查询并选择其中一个复选框时,我遇到了问题,我无法在 app.js 中获取选定的复选框值来过滤结果。

<div class="col-lg-3">
    <h3 class="m0 pb-lg">Filters</h3>
    <div class="form-group mb-xl">
         <form method="get" ng-controller="SearchController as form" class="form-horizontal">
            <label class="control-label mb">By Type of Study</label><br><label class="checkbox-inline c-checkbox" ng-repeat="s in form.typeOfStudies">
            <input type="checkbox" ng-model="search.typeOfStudy" ng-true-value="'YES'" ng-false-value="'NO'">
                <span class="fa fa-check"></span>{{s}}</input>
            </label>
            <br>
        </form>
    </div>
</div>
</div>

app.js 包含:

 $scope.getById = function (id) {
           if (id.typeOfStudy){
            $.each(id.typeOfStudy, function() {
                    if (count < id.typeOfStudy.length) {
                        count++;
                        qTypeOfStudy += "'" + this + "',";
                    }
                    else if (count == id.typeOfStudy.length) {
                        qTypeOfStudy += "'" + this + "'";
                    }
            })
        }
  }

getById 是在页面搜索栏的正文表单提交时传递的。

【问题讨论】:

  • 您可以使用 ng-click 将值放入控制器
  • 你会写plunker吗?
  • 感谢@Shohel 的回复,能否分享一个示例或链接?
  • 我可以尝试,但它是大型应用程序的一部分,所以我会尽力创建一个。
  • 混合使用 JQuery 和 Angular 真的很难调试。

标签: javascript jquery angularjs checkbox


【解决方案1】:

我使用 ng-repeat 列表中的一些值作为 id,您可以在 s in form.typeOfStudies 中拥有一些东西。 像这样:

<div ng-repeat="modelList in modelsLists">
<input type="checkbox" ng-model="selection.ids[modelList.id]" id="{{modelList.id}}"/>
</div>

在JS中初始化:

$scope.selection = {
        ids: {}
    };

并检查复选框:

if($scope.selection.ids[id]){
    // do something
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2019-05-25
    • 2017-11-19
    • 2023-04-09
    • 2015-08-29
    • 2014-09-30
    • 1970-01-01
    • 2017-09-08
    • 1970-01-01
    相关资源
    最近更新 更多