CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Girish
Girish

Reputation: 81

Display dropdown on tick of checkbox

// I have written java code to fetch data from mongo-db. What i need to do is on tick of checkbox button i have to display those data in drop-down menu using angular-js and bootstrap. Nothing is happening after doing these code. 

.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;
});

Upvotes: 0

Views: 889

Answers (2)

dev_in_progress
dev_in_progress

Reputation: 2494

It is simple, u need to bind checkbox with ng-model:

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

If its ticked $scope.ticked return true, else return false. If true show data, if false hide it (with ng-show)

Here is an example in jsFiddle without css ofc. http://jsfiddle.net/RLQhh/2282/

UPDATE:

recreateing case with service.

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>

...this is tested case so it should work with yours

Upvotes: 1

user3587856
user3587856

Reputation: 289

You can make a REST call to fetch the data from your java function and store it in scope.Then you can use ng-repeat to display data in dropdown.

Here is a very good article on how to do it.

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

Upvotes: 0

Related Questions