Angularjs - Hide Element if element doesnt exist

Question

i'm working on ACTIVITI and need to hide this button:

if no process are instantiate, i.e. if server return this (show button):

instead of this (in this case button hide):

This is the code for button i used in HTML:

<div ng-controller=getDeploy>


            <h3>Deployments Info</h3>
            <br>
            <table class="table" table-bordered table-hover>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Deployment</th>
                        <th>Category</th>
                        <th class="text-center">Url</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="info" ng-repeat="x in names">
                        <td class="danger">{{ x.id }}</td>
                        <td>{{ x.name }}</td>
                        <td class="warning">{{ x.deploymentTime }}</td>
                        <td>{{ x.category }}</td>
                        <td>{{ x.url }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="width:200px; float:left;" ng-controller="InstanziateProcess">
            <button ng-click="processdef()">
                Instanzia il Processo
            </button>
        </div>

and for JS:

function InstanziateProcess($scope, $http, Base64) {

$http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('kermit' + ':' + 'kermit');
$http.get("http://localhost:8080/activiti-rest/service/repository/process-definitions")
    .then(function (response, data, status, headers, config) {
        var key = response.data.data[0].key;


        var req = {
            method: 'POST',
            url: "http://localhost:8080/activiti-rest/service/runtime/process-instances",
            data: {
                processDefinitionKey: key
            },
            headers: {
                'Authorization': 'Basic ' + Base64.encode('kermit' + ':' + 'kermit'),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }

        $scope.processdef = function () {
            $http(req).then(function (response, data, status, headers, config) {
                console.log(response);
            });
        };
    });};

Mike Kor · Accepted Answer · 2016-01-12 09:03:40Z

1

you can use ng-hide

<button ng-hide="bValue" ng-click="processdef()">
            Instanzia il Processo
</button>

code in controller

$scope.bValue = false;
$scope.processdef = function () {
        $http(req).then(function (response, data, status, headers, config) {
            $scope.bValue = false;

            if(response.data && response.data.data.length) // may change depends on response data
                $scope.bValue = true;
        });
    };

edited Jan 12, 2016 at 9:03

answered Jan 11, 2016 at 16:41

Mike Kor

8765 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mike Kor Over a year ago

It could be response.data.length not response.data.data.length . Depends on what response contains.

Luke Over a year ago

I solved, i used data.total !=0 and it works :) Thanks you anyway for Idea :D

danday74 · Accepted Answer · 2016-01-11 16:40:12Z

1

This will fix it

<button ng-click="processdef()" ng-show="YOUR_CONDITION_WHICH_CAN_BE_CONTROLLER_FUNCTION_RETURN_VALUE">

    Instanzia il Processo
</button>

NB: You should use controller as syntax in Angular :) NNB: You might want to use ng-if instead of ng-show - ng-if prevents the element being included in the HTML, ng-show includes the element in the HTML but just makes the element hidden via the automatic adding of an hidden class / attribute

your function should return true or false.

answered Jan 11, 2016 at 16:40

danday74

58k56 gold badges273 silver badges337 bronze badges

Comments

Johannes Jander · Accepted Answer · 2016-01-11 16:40:45Z

1

If I get you right, the button should be shown when no results were received?

<button ng-if="names.total==0" ng-click="processdef()">

However, the example JSON, the JS code and the HTML don't fit together at all. Where do you assign to $scope.names, the variable you use for the ng-repeat?

answered Jan 11, 2016 at 16:40

Johannes Jander

5,0202 gold badges33 silver badges46 bronze badges

2 Comments

Luke Over a year ago

Here:

function getDeploy($scope, $http, Base64) {      $http.defaults.headers.common['Authorization'] = 'Basic ' + Base64.encode('kermit' + ':' + 'kermit');      $http.get("http://localhost:8080/activiti-rest/service/repository/deployments")         .then(function (response, data, status, headers, config) {             $scope.names = response.data.data;         }); };

Johannes Jander Over a year ago

Then it would be ng-if="names.length==0"

Ava · Accepted Answer · 2016-01-11 16:41:21Z

ng-hide or ng-show will probably do what you need. In your angular controller that has that button within its scope, create a boolean variable, say, processesAreRunning. Then, in your HTML, add the ng-show directive:

<button ng-click="processdef()" ng-show="myController.processesAreRunning">
    Instanzia il Processo
</button>

Which says "display this button if processesAreRunning is true". Obviously replacing myController with the declared name of your controller.

With that logic in place, it's as simple as setting that variable after your HTTP request is finished based on what the server returns back to you.

If you're curious, here's more documentation on how exactly the ng-show directive works: AngularJS: ngShow.

Collectives™ on Stack Overflow

Angularjs - Hide Element if element doesnt exist

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related