Question

//我编写了java代码来从mongo-db中获取数据。我需要做的是勾选复选框按钮我必须使用angular-js和bootstrap在下拉菜单中显示这些数据。执行这些代码后没有任何事情发生。

.html page
<div ng-controller="release">
                <div class="col-md-2 col-centered col-fixed">
                    <label for="cloneRelease" translate="release.form.cloneRelease">CloneRelease</label>
                </div>
                    <div>
                        <input type="checkbox" ng-model="ticked">
                        <div class="dropdown-menu" ng-repeat="release in releaseName" ng-show="ticked">{{release.name}}</div>
                    </div>
                </div>

controller.js

releaseApp.controller('release', function($scope, $location, $http, ReleaseNameService){
    $scope.releaseName = [];
    init();
    function init(){
        ReleaseNameService.getReleaseName().then(function(data){
            $scope.releaseName = data;});
            console.log('inside controller: '+$scope.releaseName);
        }
});

service.js

releaseApp.factory('ReleaseNameService', function($http){
    var releaseName = [];
    var factory = {};
    factory.getReleaseName = function(){
        return $http.get('release/fetchAllReleaseDetails').then(function(response){
            releaseName = response.data;
            console.log('inside service method'+ releaseName);
            return releaseName;
        });
    };factory;
});

Answer 1

很简单，你需要用ng-model绑定复选框：

 <input type="checkbox" ng-model="ticked">

如果勾选$scope.ticked，则返回true，否则返回false。如果为true显示数据，则为false，将其隐藏（使用ng-show）

以下是没有css ofc的jsFiddle中的示例。 http://jsfiddle.net/RLQhh/2282/

<强>更新

使用服务重新创建案例。

service.js

app.factory('dataService', function ($http) {
        var dataObject= {
            async: function () {
                var promise = $http.get('data/').then(function (response) {
                    return response;
                });
                return promise;
            }
        };
        return dataObject;
})

controller.js

    $scope.dataTest = [];
    $scope.ticketed = false;

    var getData = function(){
        dataService.async().then(function (d) {
            $scope.dataTest = d.data;
        });
    }

    getData();

HTML

<input type="checkbox" ng-model="ticketed">
<div ng-show="ticketed" ng-repeat="dat in dataTest">
    {{dat.name}}
</div>

...这是经过测试的案例，所以它应该与你合作

Answer 2

您可以进行REST调用以从java函数中获取数据并将其存储在范围内。然后您可以使用ng-repeat在下拉列表中显示数据。

这是一篇关于如何做的非常好的文章。

http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/06/29/how-to-work-with-the-bootstrap-dropdown-in-angularjs.aspx

显示复选框勾号的下拉列表

2 个答案: