JavaScript Function in angularjs Controller

Question

I m new to angularjs .What issue im facing are: In index.html on click Report1 i want to display the report in Another html view. muFunc() is called on ng-click() event which is written in script.js . I want to initialize names[],years[] and other variable in script.js so that i can access as a dropdown in lmrAttribute.html.But nothing is getting displayed. Plunker Link is https://plnkr.co/edit/M2tHhilFXciiyKUX7ETT?p=preview

// index.html start here

   <!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 start here

    <!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 start here

 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"];
  };

});

Answer 1

I think you are referring to select dropdown not have a prefilled value

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

Here you must either initalize it to proper value (ng-model) or add a default value.

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

Answer 2

We can do like this:

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

You can find the updated code here at Plunkr

JavaScript Function in angularjs Controller

Question

2 answers

solution1
0 2017-03-27 17:29:52

solution2
0 ACCPTED 2017-03-27 17:39:46

JavaScript Function in angularjs Controller

Question

2 answers

solution1 0 2017-03-27 17:29:52

solution2 0 ACCPTED 2017-03-27 17:39:46

solution1
0 2017-03-27 17:29:52

solution2
0 ACCPTED 2017-03-27 17:39:46