在复选框打勾时显示下拉菜单

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

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

这里有一篇关于如何操作的非常好的文章。

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

Answer 2

很简单，你需要用ng-model绑定checkbox:

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

如果勾选 $scope.ticked return true，否则 return false。如果为 true 显示数据，如果为 false 则隐藏它（with 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>

...这是测试用例，因此它应该适用于您的

在复选框打勾时显示下拉菜单

Display dropdown on tick of checkbox

angularjs

angular-ui-bootstrap