角JS - 轉移到不同的標籤，並調用一個函數NG單擊 -

我有一個標籤的格式，並在另一個選項卡中提交的應用程序列表。如果我點擊edit一個形式，我應該從數據庫加載數據，然後轉到其他選項卡。在ng-click上，我可以檢索數據但無法更改選項卡。角JS - 轉移到不同的標籤，並調用一個函數NG單擊 -

以下是相關文件： navbar.html

<nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> 

      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html"></a> 
    </div> 

    <div class="header-right"> 



     <a href="" ng-click="logout()" class="btn btn-danger" title="Logout"><i class="fa fa-sign-out fa-2x"></i></a> 

    </div> 
</nav> 
<!-- /. NAV TOP --> 
<nav class="navbar-default navbar-side" role="navigation" style="width:200px"> 
    <div class="sidebar-collapse"> 
     <ul class="nav" id="main-menu"> 
      <li> 
        <div class="inner-text"> 
         {{user.name}} 
        <br /> 
         <small> </small> 
        </div> 
       </div> 

      </li> 

      <li> 
       <a id="page1" ng-class='{"active-menu": selectedMenu == "dashboard"}' ui-sref="secured.dashboard" ng-click='selectedMenu = "dashboard"'><i class="fa fa-dashboard "></i>Dashboard</a> 
      </li> 
      <li> 
       <a id="page2" ng-class='{"active-menu": selectedMenu == "applicationForm"}' ui-sref="secured.applicationForm" ng-click='selectedMenu = "applicationForm"'><i class="fa fa-handshake-o "></i>Application Forms</a> 
      </li> 

      <li> 
       <a ng-class='{"active-menu": selectedMenu == "logout"}' href="" ng-click="logout()" ng-click='selectedMenu = "logout"'><i class="fa fa-sign-out fa-fw"></i> Logout</a> 
      </li> 


     </ul> 

    </div> 

</nav>

dashboard.html：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Dashboard For Applications</title> 
</head> 

<body> 
    <div id="wrapper"> 
     <div id="page-wrapper"> 
      <div id="page-inner"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <h1 class="page-head-line"> 
          <div class="alert alert-danger"> 
           DASHBOARD 
          </div> 
         </h1> 
         <h1 class="page-subhead-line"> 
          <div class="alert alert-info"> 
           Welcome! Here is the list of applications you have saved or submitted. <br><br> 
          </div> 
         </h1> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12"> 

         <div class="panel panel-default"> 
          <div class="panel-heading"> 
           <h3>Applications List</h3> 
          </div> 
          <div class="panel-body"> 
           <table ng-if="applicationList" st-table="applicationTable" class="table table-striped"> 
            <tr> 
             <th>Application Number</th> 
             <th>Project Title</th> 
             <th>Project Description</th> 
             <!-- <th>DataSet Available</th> --> 
             <!-- <th>Impact</th> --> 
             <th>Number of Interns</th> 
             <th>Expected SkillSet</th> 
             <th>Software Licenses Needed</th> 
             <th>Hardware Requirements</th> 
             <th></th> 
             <th></th> 
            </tr> 
            <tbody> 
             <tr ng-repeat="application in applicationList"> 
              <td class="col-md-2">{{application.number}}</td> 
              <td class="col-md-2">{{application.title}}</td> 
              <td class="col-md-2">{{application.description}}</td> 
              <!-- <td><span ng-repeat='area in idt.areas'>{{area}}, </span></td> --> 
              <!-- <td class="col-md-2">{{application.technical}}, {{application.business}}</td> --> 
              <td class="col-md-2">{{application.numberOfInterns}}</td> 
              <td class="col-md-2">{{application.skillSet}}</td> 
              <td class="col-md-2">{{application.software}}</td> 
              <td class="col-md-2">{{application.hardware}}</td> 
              <td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state=='saved'">Delete</button></td> 
              <td><button class="btn btn-warning" ng-click="selectedMenu='applicationForm'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td> 
              <!-- <td><button class="btn btn-warning" ng-click="selectedMenu='dashboard'; edit(application._id)" ng-show="application.state=='saved'">Edit</button></td> --> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </div> 
        </div> 
        <!-- /. ROW --> 
        <hr /> 
       </div> 
       <!--/.ROW--> 
      </div> 
      <!-- /. PAGE INNER --> 
     </div> 
     <!-- /. PAGE WRAPPER --> 
    </div> 
    <!-- /. WRAPPER --> 
</body> 

</html>

dashboard.js：

(function() { 
    var app = angular.module('dashboard', []); 
    app.config(['$stateProvider', function($stateProvider) { 
     $stateProvider.state('secured.dashboard', { 
      url: '/dashboard', 
      controller: 'DashboardController', 
      templateUrl: '/views/dashboard.html' 
     }); 
    }]); 

    app.controller('DashboardController', ['$scope', 'AuthService', 'user', '$state', '$http', function($scope, AuthService, user, $state, $http) { 
     $scope.user = user; 
     AuthService.setUser(user); 

     $scope.logout = function() { 
      AuthService.logout().then(function() { 
       $scope.user = null; 
       $state.go('unsecured'); 
      }) 
     } 

     var refresh = function(){ 
      $http.get('/application/applicationList').then(function(response){ 
       console.log("I got the applications I requested"); 
       $scope.applicationList = response.data; 
       console.log($scope.applicationList); 
       $scope.pagination = {}; 
       // $scope.totalItems = 200; 
       $scope.pagination.currentPage = 0; 
       $scope.numPerPage = 10; 
      }); 

     }; 
     refresh(); 

     $scope.remove = function(id){ 
      var del = false; 
      swal({ 
       title: 'Are you sure?', 
       text: "You won't be able to revert this!", 
       type: 'warning', 
       showCancelButton: true, 
       confirmButtonColor: '#3085d6', 
       focusCancel: true, 
       allowEscapeKey: true, 
       allowEnterKey: true, 
       allowOutsideClick: true, 
       cancelButtonColor: '#d33', 
       confirmButtonText: 'Yes, delete it!', 
       cancelButtonText: 'No, cancel!', 
       confirmButtonClass: 'btn btn-success', 
       cancelButtonClass: 'btn btn-danger', 
       buttonsStyling: false 
       }).then(function() { 
        $http.delete('/application/applicationlist/'+id).then(function(response){ 
         clear(); 
         refresh(); 
        }); 
        swal(
        'Deleted!', 
        'Your Application has been deleted.', 
        'success' 
        ) 
       }, function (dismiss) { 
       // dismiss can be 'cancel', 'overlay', 
       // 'close', and 'timer' 
        if (dismiss === 'cancel') { 
         swal(
          'Cancelled', 
          'Your Application is safe :)', 
          'error' 
         ) 
        } 

      }) 
     }; 

     $scope.edit = function(id){ 
      console.log(id); 
      console.log("Edit function called"); 
      $http.get('/application/applicationList/'+id).then(function(response){ 
       $scope.application = response.data; 
       console.log($scope.application); 
       //refresh(); 
       $scope.changeTab(event, 'page1'); 
      }); 

     }; 

     var clear = function(){ 
      $scope.application = { 
       technical: false, 
       business: false 
      }; 
     }; 


    }]); 
})();

applicationForm.js：

(function() { 
    var app = angular.module('applicationForm', []); 
    app.config(['$stateProvider', function($stateProvider) { 
     $stateProvider.state('secured.applicationForm', { 
      url: '/applicationForm', 
      controller: 'applicationFormController', 
      templateUrl: '/views/applicationForm.html' 
     }); 
    }]); 

    app.controller('applicationFormController', ['$http', '$scope', '$state', '$uibModal', function($http, $scope, $state, $uibModal) { 

     $scope.application = { 
      technical: false, 
      business: false 
     }; 

     var refresh = function(){ 
      $http.get('/application/applicationList').then(function(response){ 
       console.log("I got the applications I requested"); 
       $scope.applicationList = response.data; 
       console.log($scope.applicationList); 
       $scope.pagination = {}; 
       // $scope.totalItems = 200; 
       $scope.pagination.currentPage = 0; 
       $scope.numPerPage = 10; 
      }); 

     }; 
     refresh(); 

     $scope.saveApplication = function(){ 
      console.log($scope.application); 
      console.log($scope.applicationList); 
      var check = 0; 
      $scope.application.state = "saved"; 
      $scope.application.userEmail = $scope.user.email; 

      for (var i=0, len=$scope.applicationList.length; i < len; i++) { 
       if ($scope.applicationList[i]._id == $scope.application._id) { 
        check = 1; 
        console.log("matched"); 
        break; 
       } 
      } 
      if(check == 1){ 
       $http.put('/application/applicationlist/' + $scope.application._id, $scope.application).then(function(response){ 
        //$scope.contact = response.data; 
        refresh(); 
       }); 
      } 
      else{ 
       $http.post('/application/applicationList', $scope.application).then(function(response){ 
        console.log(response); 
        refresh(); 
       }); 
      } 
      swal({ 
       title: "Great!", 
       text: "We have saved your application", 

       type: "success", 
       timer: 3000, 
       confirmButtonText: "Wohoo!" 
      }); 
      clear(); 
     }; 


     $scope.submitApplication = function(){ 
      console.log("Submit called"); 
      console.log($scope.application.title); 
      console.log($scope.user.email); 
      $scope.application.userEmail = $scope.user.email; 
      $scope.application.state = "submit"; 
      var check = 0; 

      for (var i=0, len=$scope.applicationList.length; i < len; i++) { 
       if ($scope.applicationList[i]._id == $scope.application._id) { 
        check = 1; 
        console.log("matched"); 
        break; 
       } 
      } 

      if(check == 1){ 
       $http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){ 
        refresh(); 
       }); 
      } 
      else{ 
       $http.post('/application/applicationList', $scope.application).then(function(response){ 
        console.log("Successfully submitted"); 

        refresh(); 
       }); 
      } 
      swal({ 
       title: "Great!", 
       text: "We have received your request", 
       type: "success", 

       timer: 3000, 
       confirmButtonText: "Wohoo!" 
      }); 
      clear(); 
     }; 

     var clear = function(){ 
      $scope.application = { 
       technical: false, 
       business: false 
      }; 
     }; 

     //Universities 
     $scope.application.selectname1={id:100,name: 'None'}; 
     $scope.application.selectname2={id:100,name: 'None'}; 
     $scope.application.selectname3={id:100,name: 'None'}; 

     $scope.filter1 = function(item){ 
      return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100); 
     }; 

     $scope.filter2 = function(item){ 
      return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100); 
     }; 
     $scope.filter3 = function(item){ 
      return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100); 
     }; 
     $scope.universities = [ 
      { 
       id:1, 
       name: 'IITs' 
      }, 
      { 
       id:2, 
       name: 'IIITs' 
      }, 
      { 
       id:3, 
       name: 'BITS' 
      }, 
      { 
       id:4, 
       name: 'IISc' 
      }, 
      { 
       id:100, 
       name: 'None' 
      } 
     ]; 


     //Degrees 
     $scope.application.selectdegree1={id:100,name: 'None'}; 
     $scope.application.selectdegree2={id:100,name: 'None'}; 
     $scope.application.selectdegree3={id:100,name: 'None'}; 

     $scope.filterDegree1 = function(item){ 
      return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100); 
     }; 

     $scope.filterDegree2 = function(item){ 
      return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100); 
     }; 
     $scope.filterDegree3 = function(item){ 
      return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100); 
     }; 
     $scope.degrees = [ 
      { 
       id:1, 
       name: 'PhD' 
      }, 
      { 
       id:2, 
       name: 'Masters' 
      }, 
      { 
       id:3, 
       name: 'BTech' 
      }, 
      { 
       id:100, 
       name: 'None' 
      } 
     ]; 

     $scope.pageChanged = function() { 
      //alert('Page changed to: ' + $scope.pagination.currentPage); 
      //$scope.pagination.currentPage = page; 
      var begin = (($scope.pagination.currentPage - 1) * $scope.numPerPage); 
      //var end = begin + $scope.numPerPage; 
      $scope.getPatents(begin) 
     }; 


    }]); 
})();

來源

2017-09-14 Tarun

通常，你會使用'ngShow'有條件的用戶界面的變化。然後你設置一個變量來保存'true/false'值，並將其用作'ngShow'的開關。例如，你有'$ scope.showTab = FALSE'，然後其他兩個因素會用'ngShow = {$ scope.showTab}'和'ngShow = {！$ scope.showTab}'分別。 –

@馬特newelski - 我不明白爲什麼在我有結構這樣做，因爲我有儀表盤和應用2個不同的HTML文件 – Tarun

你有沒有考慮過使用['$ state.go'（https：//開頭的github .COM /角度的UI/UI路由器/維基/快速參考＃stategoto - toparams - 選項）？ –

@Tarun完全像你說的，你的結構有問題，你應該有一個父/抽象狀態導覽列導航，儀表板和副州其他頁面，所以在app.html將導航欄和記得包括dashboard.html的要顯示的內容嵌套在app.html父狀態<div ui-view></div>標籤，一旦你瀏覽到/dashboard：

$stateProvider 
    .state('login', { 
     url: "/login", 
     templateUrl: 'pages/login.html', 
     controller: 'LoginController', 
     data: { 
      requireLogin: false 
     } 
    }) 

    .state('app', { 
     abstract: true, 
     url: '/app', 
     templateUrl: 'views/app.html', 
     data: { 
      requireLogin: true 
     } 
    }) 

    .state('app.dashboard', { 
     url: '/dashboard', 
     controller: 'DashboardCtrl', 
     templateUrl: 'pages/map.html', 
     data: { 
      requireLogin: true 
     } 
    });

來源

2017-09-14 07:29:34 johan

好的，會檢查這個。 – Tarun

嘿，謝謝你的回答。我能夠使用$ state.go來做到下次會記錄下結構。 – Tarun

角JS - 轉移到不同的標籤，並調用一個函數NG單擊 -

回答

相關問題