Question

我从AngularJS开始，我正在做一个简单的应用程序来学习它，

在我的应用中，我有四个标签：列表，创建，更新和删除

但是如果我点击列表部分的按钮，我只想显示Updade和Delete选项卡。

我做了一个工厂，将标签状态设置为true或false。当我按下按钮时，状态会更改，但选项卡不会更新。有人可以帮我吗？

这是我的标签工厂：

＆＃13;

angular.module('primeiraApp').factory('tabs', [TabsFactory])

function TabsFactory(){

   function show(owner, {
      tabList = false,
      tabCreate = false,
      tabUpdate = false,
      tabDelete = false
   }) {
      owner.tabList = tabList
      owner.tabCreate = tabCreate
      owner.tabUpdate = tabUpdate
      owner.tabDelete = tabDelete
   }

   return { show }
}

＆＃13;

这是我的控制器：

＆＃13;

angular.module('primeiraApp').controller('BillingCycleController',[
  '$http',
  'msgs',
  'tabs',
  BillingCycleController
])

function BillingCycleController($http,msgs,tabs){
    const vm = this
    const url = 'http://localhost:3003/api/billingCycles'

    vm.refresh = function (){
      $http.get(url).then(function(response){
        vm.billingCycle = {}
        vm.billingCycles = response.data
        tabs.show(vm,{tabList: true, tabCreate: true})
      })
    }

    vm.create = function(){
      $http.post(url,vm.billingCycle).then(function(response){
        vm.refersh()
        msgs.addSuccess('Operação realizada com Sucesso')
      }).catch(function(response){
        msgs.addError(response.data.errors)
      })
    }

    vm.showTabUpdate = function(billingCycle){
      vm.billingCycle = billingCycle
      tabs.show(vm, {tabUpdate : true})
      console.log("List: "+vm.tabList+"\nCreate: "+vm.tabCreate+"\nUpdate: "+vm.tabUpdate+"\nDelete: "+vm.tabDelete)
    }

    vm.showTabDelete = function(billingCycle){
      vm.billingCycle = billingCycle
      tabs.show(vm, {tabDelete : true})
      console.log("List: "+vm.tabList+"\nCreate: "+vm.tabCreate+"\nUpdate: "+vm.tabUpdate+"\nDelete: "+vm.tabDelete)
    }

    vm.refresh()
}

＆＃13;

我的HTML在哪里：

＆＃13;

<content-header name = "Ciclo de Pagamentos" small = "Cadastro"></content-header>

<section class="content">

  <div class="nav-tabs-custom" ng-controller= "BillingCycleController as bcCtrl">
    <ul class = "nav nav-tabs">

      <li ng-if= "bcCtrl.tabList">
        <a href data-target = "#tabList" data-toggle="tab">
          <i class = "fa fa-bars"></i> Lista
        </a>
      </li>

      <li ng-if= "bcCtrl.tabCreate">
        <a href data-target = "#tabCreate" data-toggle="tab">
          <i class = "fa fa-plus"></i> Incluir
        </a>
      </li>

      <li ng-if="bcCtrl.tabUpdate">
        <a href data-target = "#tabUpdate" data-toggle="tab">
          <i class = "fa fa-pencil"></i> Editar
        </a>
      </li>

      <li ng-if= "bcCtrl.tabDelete">
        <a href data-target = "#tabDelete" data-toggle="tab">
          <i class = "fa fa-trash-o"></i> Deletar
        </a>
      </li>
    </ul>

    <div class = "tab-content">
      <div class="tab-pane" id= "tabList"  ng-if= "bcCtrl.tabList" ng-include = "'billingCycle/list.html'" ></div>
      <div class="tab-pane" id= "tabCreate" ng-if= "bcCtrl.tabCreate" ng-include = "'billingCycle/form.html'"></div>
      <div class="tab-pane" id= "tabUpdate" ng-if="bcCtrl.tabUpdate" ng-include = "'billingCycle/form.html'"></div>
      <div class="tab-pane" id= "tabDelete" ng-if= "bcCtrl.tabDelete"  ng-include = "'billingCycle/form.html'"></div>
    </div>

  </div>
</section>

＆＃13;

这是我在控制台中得到的内容

当我点击编辑时：

当我点击删除时：

有人能说出我做错了吗？

Answer 1

使用ng-show代替ng-if。

Answer 2

我解决了。

有一个名为list.html的文件就像这样：

<div class="box-body" ng-controller = "BillingCycleController as bcCtrl">
  <table class = "col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tr>
      <th>Nome</th>
      <th>Mês</th>
      <th>Ano</th>
      <th>Ações</th>
    </tr>
    <tbody>
      <tr ng-repeat="billingCycle in bcCtrl.billingCycles">
        <td>{{billingCycle.name}}</td>
        <td>{{billingCycle.month}}</td>
        <td>{{billingCycle.year}}</td>
        <td class="table-actions">
          <button class = "btn btn-warning" ng-click="bcCtrl.showTabUpdate(billingCycle)"><i class="fa fa-pencil"></i></button>
          <button class = "btn btn-danger"  ng-click="bcCtrl.showTabDelete(billingCycle)"><i class="fa fa-trash-o"></i></button>
       </td>
      </tr>
    </tbody>
  </table>
</div>

我刚刚从第一行删除了ng-controller = "BillingCycleController as bcCtrl"，问题就解决了。发生这种情况是因为我的tabs.html正在调用list.html，并且通过将ng-controller放在list.html中我创建了另一个BillingCycleController实例。

更改后，我的来源是这样的：

<div class="box-body" >
  <table class = "col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <tr>
      <th>Nome</th>
      <th>Mês</th>
      <th>Ano</th>
      <th>Ações</th>
    </tr>
    <tbody>
      <tr ng-repeat="billingCycle in bcCtrl.billingCycles">
        <td>{{billingCycle.name}}</td>
        <td>{{billingCycle.month}}</td>
        <td>{{billingCycle.year}}</td>
        <td class="table-actions">
          <button class = "btn btn-warning" ng-click="bcCtrl.showTabUpdate(billingCycle)"><i class="fa fa-pencil"></i></button>
          <button class = "btn btn-danger"  ng-click="bcCtrl.showTabDelete(billingCycle)"><i class="fa fa-trash-o"></i></button>
       </td>
      </tr>
    </tbody>
  </table>
</div>

感谢所有试图帮助我的人

ng-if未根据变量进行更新

2 个答案: