Angularjs - Скрыть элемент, если элемент оленья кожа существовать

Question

я работаю над Activiti и нужно, чтобы скрыть эту кнопку:

, если ни один процесс не Instantiate, т.е. если сервер возвращения этого (кнопка шоу):

вместо этого (в данном случае кнопка скрыть):

Это код для кнопки я использовал в 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> 

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

Answer 1

вы можете использовать ng-hide

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

код в контроллере

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

Answer 2

Это будет исправить это

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

    Instanzia il Processo 
</button> 

NB: Вы должны использовать контроллер как синтаксис в Angular :) NNB: Возможно, вы захотите использовать ng-if вместо ng-show-ng-if, предотвратите e, входящий в HTML, ng-show включает элемент в HTML, но только делает элемент скрытым посредством автоматического добавления скрытого класса/атрибута

ваша функция должна возвращать true или false.

Answer 3

Если я получу вас правильно, кнопка должна отображаться, когда результаты не были получены?

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

Однако пример JSON, код JS и HTML не подходят друг другу. Где вы назначаете $scope.names, переменную, которую вы используете для ng-repeat?

Answer 4

ng-hide или ng-show вероятно, будет делать то, что вам нужно. В вашем угловом контроллере, который имеет эту кнопку в своем объеме, создайте логическую переменную, скажем, processesAreRunning. Затем, в вашем HTML, добавьте ng-show директиву:

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

Который говорит "эта кнопка отображения, если processesAreRunning является true". Очевидно, заменив myController на указанное имя вашего контроллера.

С этой логикой на месте это так же просто, как установить эту переменную после завершения HTTP-запроса на основании того, что сервер вернется к вам.

---

Если вам интересно, здесь больше документации о том, как именно работает ng-show директива: AngularJS: ngShow.