JavaScript在angularjs中的功能控制器

我新增了angularjs。我遇到的問題有：在index.html上單擊Report1我想在另一個html視圖中顯示報告。在script.js中寫入的ng-click（）事件上調用muFunc（）。我想在script.js中初始化names []，years []和其他變量，這樣我就可以在lmrAttribute.html中作爲下拉列表訪問。但是沒有任何顯示。 Plunker Link是https://plnkr.co/edit/M2tHhilFXciiyKUX7ETT?p=preview JavaScript在angularjs中的功能控制器

// INDEX.HTML這裏開始

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="script.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body ng-controller="myCtrl"> 

    <div class="header"> 
    <h1>Report Generation</h1> 
    </div> 

    <div class="row"> 

    <div class="col-3 menu"> 
     <ul> 
     <li ng-click="myFunc()"><a href="LmrAttribute.html">Report1</a></li> 
     <li ng-click="myFunc()"><a href="Check.html">Report2</a></li> 
     <li>Report3</li> 
     <li>Report4</li> 
     </ul> 
    </div> 
    </div> 
</body> 

</html>

//lmrAttribute.html這裏開始

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="script.js"></script> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

    <div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">LM All Period Summary:</div> 
     <div class="panel-body"> 
     <form class="form-inline" ng-submit="myPaginationFunction()"> 
      <div class="row"> 
      <div class="form-group col-sm-6"> 
       <label for="suppliername">Supplier Name: </label> 
       <select name="supplierName" ng-model="supplier" ng-options="x for x in names"> 
       </select> 
      </div> 
      <div class="form-group col-sm-6"> 
       <label for="pid">PID:</label> 
       <input type="textfiled" class="form-control" id="pid" placeholder="Enter Pid" ng-model="pid"> 
      </div> 
      </div> 
      <br> 
      <br> 
      <div class="row"> 
      <div class="form-group col-sm-6"> 
       <label for="AgreementId">AgreementId:</label> 
       <input type="textfiled" class="form-control" id="agreementId" placeholder="Enter agreementId" ng-model="agreementId"> 
      </div> 

      <div class="form-group col-sm-6"> 
       <label for="OBLIGATION FISCAL YEAR">OBLIGATION FISCAL YEAR:</label> 
       <select name="OBLIGATION FISCAL YEAR" ng-model="oBLIGATIONFISCALYEAR" ng-options="y for y in years"> 
       </select> 
      </div> 
      </div> 
      <br> 
      <br> 
      <div class="row"> 
      <div class="form-group col-sm-6"> 
       <label for="OBLIGATION FISCAL QUARTER">OBLIGATION FISCAL QUARTER:</label> 
       <select name="OBLIGATION FISCAL QUARTER" ng-model="oBLIGATIONFISCAlQUARTER" ng-options="z for z in f_quarter"> 
       </select> 
      </div> 
      <div class="form-group col-sm-6"> 
       <label for="OBLIGATION FISCAL MONTH">OBLIGATION FISCAL MONTH:</label> 
       <select name="OBLIGATION FISCAL MONTH" ng-model="oBLIGATIONFISCALMONTHO" ng-options="z for z in f_month"> 
       </select> 
      </div> 
      </div> 
      <br> 
      <br> 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

//script.js這裏開始

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
    $scope.names = []; 
    $scope.years = []; 
    $scope.myFunc = function() { 
    $scope.names = ["Emil", "Tobias", "Linus"]; 
    $scope.years = ["2010", "2012", "2017"]; 
    }; 

});

來源

2017-03-27 Learn

我們可以這樣做：

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.names=[]; 
$scope.years=[]; 
$scope.showReport = false; 
$scope.myFunc = function() { 
$scope.names = ["Emil", "Tobias", "Linus"]; 
$scope.years = ["2010" ,"2012","2017"]; 
console.log($scope.names); 
$scope.showReport = true; 
}; 
});

您可以在這裏Plunkr找到更新的代碼

來源

2017-03-27 17:39:46

耶感謝您的建議。但初始化變量外功能不會幫助，因爲下拉將從服務器調用進行輪詢。 – Learn

您可以使用$ rootScope來初始化變量並通過應用程序在任何地方訪問它。 –

Hey Anuj，Plunker的更新代碼。希望這可以幫助你。 –

我想你是指選擇下拉菜單沒有預先填好的值

<select name="supplierName" ng-model="supplier" ng-options="x for x in names"> 
</select>

在這裏，您必須將其初始化爲適當的值（ng-model）或添加默認值。

<select name="supplierName" ng-model="supplier" ng-options="x for x in names"> 
    <option value="">Select Supplier</option> 
</select>

來源

2017-03-27 17:29:52

@MaheshSinghCHouhan再次陷入即時通訊如果點擊，如果我們需要提交在更新plunker Excel表格生成。假設在click（）事件中存在api調用，並且響應數據需要轉換爲Excel表單。 – Learn

JavaScript在angularjs中的功能控制器

回答

相關問題