时间戳

首页 > 解决方案 > ng-if 没有根据变量更新

javascript - ng-if 没有根据变量更新

问题描述

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

在我的应用程序中，我有四个选项卡：列表、创建、更新和删除

但是如果我点击列表部分中的按钮，我只想显示选项卡更新和删除。

我做了一个工厂来将标签状态设置为真或假。当我点击按钮时，状态会改变，但选项卡不会更新。任何人都可以帮助我吗？

这是我的标签工厂：

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 }
}

这是我的控制器：

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()
}

我的 HTML 在哪里：

<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>

这是我在控制台中得到的

当我点击编辑时： 单击更新按钮

当我点击删除时： 点击删除按钮

有谁可以说我做错了什么？

标签： javascripthtmlangularjs

解决方案

我解决它。

有一个名为 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-controllerlist.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>

感谢所有试图帮助我的人

推荐阅读