Fill form with angularJs

Question

This is my HTML and AngularJs Controller.
When I start the app, the form is filled with data by ng-repeat...

My question and problem is:
When I click on dropdown list I want to call web api with this call and fill form. I call web api and get data from Api but can't fill the form.

<div class="dropdown" ng-app="myapp" ng-controller="PlayerCtrl">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Insert
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a ng-click="Testmetod('2018')" >2018</li>
    <li><a ng-click="Testmetod('2017')" >2017</li>
    <li><a ng-click="Testmetod('Previous')" >Previous</li>
  </ul>
</div>

    <div class="lisstatistic">
  <section>
      <div class="tbl-headerStat">
        <table cellpadding="0" cellspacing="0" border="1">
          <thead>
            <tr>
              <th style="width :20%;">Pos</th>
              <th style="width :60%;">Player</th>
              <th style="width :20%;">AST</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-contentStat">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr ng-repeat="dataModel in allAsists">
              <td style="width :20%; padding-top: 5px;" >{{dataModel.AstPosition}}</td>
              <td ng-if = "dataModel.Player.Status == 0" style="width :60%; color:red; padding-top: 5px;" >{{dataModel.Player.FullName}}</td>
              <td ng-if = "dataModel.Player.Status == 1" style="width :60%; padding-top: 5px;" >{{dataModel.Player.FullName}}</td>
              <td ng-if = "dataModel.Player.Status == 0" style="width :20%; color:red; padding-top: 5px; text-align:center;" >{{dataModel.Asists | number:0}}</td>
              <td ng-if = "dataModel.Player.Status == 1" style="width :20%; padding-top: 5px; text-align:center;" >{{dataModel.Asists | number:0}}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </section>
</div><div class="lisstatistic">
  <section>
      <div class="tbl-headerStat">
        <table cellpadding="0" cellspacing="0" border="1">
          <thead>
            <tr>
              <th style="width :20%;">Pos</th>
              <th style="width :60%;">Player</th>
              <th style="width :20%;">PTS</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="tbl-contentStat">
        <table cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr ng-repeat="dataModel in allPoints">
              <td style="width :20%; padding-top: 5px;" >{{dataModel.PtsPosition}}</td>
              <td ng-if = "dataModel.Player.Status == 0" style="width :60%; color:red; padding-top: 5px;" >{{dataModel.Player.FullName}}</td>
              <td ng-if = "dataModel.Player.Status == 1" style="width :60%; padding-top: 5px;" >{{dataModel.Player.FullName}}</td>
              <td ng-if = "dataModel.Player.Status == 0" style="width :20%; color:red; padding-top: 5px; text-align:center;" >{{dataModel.Points | number:0}}</td>
              <td ng-if = "dataModel.Player.Status == 1" style="width :20%; padding-top: 5px; text-align:center;" >{{dataModel.Points | number:0}}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </section>
</div>

Angular Controller:

app.controller('PlayerCtrl', function ($scope, $http, ApiCall) {

  var result = ApiCall.GetApiCall("nba", "GetRebounds/2000").success(function (data) {
      //var data = $.parseJSON(JSON.parse(data));
      $scope.allRebounds = data;
  });

  $scope.Testmetod = function(year) {
    var result = ApiCall.GetApiCall("nba", "GetAsists" + '/' + year).success(function (data) {
      $scope.allAsists = data;
    });
  };

});

I think you mean table not form. There is no form in your code. — Pop-A-Stash
– Pop-A-Stash, Commented Aug 7, 2017 at 20:02
what is the response exactly in data ? check to see if allAssists is an array — Shahzad
– Shahzad, Commented Aug 7, 2017 at 22:33

Scott · Accepted Answer · 2017-08-07 23:31:14Z

1

I think your problem is that your ng-controller is only surrounding your PULLDOWN, so all the code that displays the page is outside the scope of your controller and doesn't have access to the values. Add a div that contains your app and controller and have it encompass the entire HTML block.

<div ng-app="myapp" ng-controller="PlayerCtrl">
  <div class="dropdown">
  </div>
// The rest of your html
</div>

answered Aug 7, 2017 at 23:31

Scott

1,6904 gold badges13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

NeshaSerbia Over a year ago

That's it. Thanks.

Collectives™ on Stack Overflow

Fill form with angularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related