Question

我在函数中传递参数，参数变为未定义。

这是脚本：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

    $scope.selectedTopic = {};
    $scope.selectedSubject = {};

  $http.get("http://localhost:8080/simple-web-services/getTopics")
  .then(function(response) {
      $scope.topics = response.data;
  });

  $scope.getSubjects = function(id) {
      $http.get("http://localhost:8080/simple-web-services/getSubjectsByTopicId/" +id)
      .then(function(response) {
          $scope.subjects = response.data;
      });
  }
});

这是html

<form method="get" action="createTemplate">
    <div class="form-group">

    <label for="sel1">Topics (select one):</label>
     <select class="form-control" ng-model="selectedTopic"  ng-options="topic.name for topic in topics" ng-change = "getSubjects(selectedTopic.id)" >
        <option value="" >-- Select item --</option>
    </select> <br>

      <label for="sel2">Subject (select one):</label>

     <select name="subject" class="form-control"  ng-model="selectedSubject" ng-options="subject.name for subject in subjects">
        <option value="">-- Select item --</option>
    </select> <br>

      <label for="sel1">Negative marking:</label>
      <select class="form-control" name="negativeMarks">
        <option>Yes</option>
        <option>No</option>
      </select> <br>

      <label>Reference Book:</label>
       <input type="text" class="form-control" name="ref" required>
      <label for="sel1">Number of Questions:</label>
       <input type="number" class="form-control" name="questionCount" required><br>

       <input class ="bg-primary" type="submit" value="submit and download template">

    </div>
  </form>

实际上我正在尝试根据第一个下拉选项来填充下拉列表。

这是错误：

angular.js:10765 GET http://localhost:8080/simple-web-services/getSubjectsByTopicId/undefined 500 (Internal Server Error)

Answer 1

我不确定ng-options属性是如何工作的，所以这可能对你没什么帮助，但是如果你把它换成ng-repeat并定义你自己的选项模板那么这个例子可以帮助你实现你的目标想。

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {

  $scope.selectedTopic;
  $scope.selectedSubject;
  // Adding topics for ng-options since you did not include in your example
  $scope.topics = [{
      id: 1,
      name: "first"
    },
    {
      id: 2,
      name: "second"
    },
    {
      id: 3,
      name: "third"
    }
  ];

  // These method will error in SO snippet because I do not have what ever you have on your localhost.
  //$http.get("http://localhost:8080/simple-web-services/getTopics")
  //  .then(function(response) {
  //    $scope.topics = response.data;
  //  });

  //$scope.getSubjects = function(id) {
  //  console.log(id)
  //  $http.get("http://localhost:8080/simple-web-services/getSubjectsByTopicId/" + id)
  //    .then(function(response) {
  //      $scope.subjects = response.data;
  //    });

  // My tmp version of getSubjects to show that it is now getting an ID
  $scope.getSubjects = function(id) {
    console.log(id);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <select class="form-control" ng-model="selectedTopic" ng-change="getSubjects(selectedTopic)">
    <option value="" >-- Select item --</option>
    <option ng-repeat="topic in topics" value="{{topic.id}}">{{topic.name}}</option>
  </select>
  </div>
</div>

＆＃13;

Answer 2

到目前为止，我知道你想要做的是每当另一个更改时填充一个选择。在我看来，有很多方法可以达到这个目的，但我会用手表向你解释一个简单的方法：

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $filter) {

  $scope.selectedTopic = {};
  $scope.selectedSubject = {};
  $scope.topics = [];
  $scope.allsubjects = [{parentid: 1, name:"AngularJS", parent:'FrontEnd'}, {parentid: 1, name:"ReactJS", parent:'FrontEnd'}, {parentid: 2, name:"NodeJS", parent:'BackEnd'}, {parentid: 2, name:"Sinatra", parent:'BackEnd'}];
  $scope.topics = [{id: 1, name: 'FrontEnd'}, {id: 2, name: 'BackEnd'}];

  $scope.$watch('selectedTopic', function(topic) {
    if (topic == null) return;
    //careful how your json is built
    $scope.getSubjects(topic);
  })

  /*$http.get("http://localhost:8080/simple-web-services/getTopics")
    .then(function(response) {
      $scope.topics = response.data;
    });*/

  $scope.getSubjects = function(name) {
    /*$http.get("http://localhost:8080/simple-web-services/getSubjectsByTopicId/" + id)
      .then(function(response) {
        $scope.subjects = response.data;
      });*/
    $scope.subjects = $filter('filter')($scope.allsubjects, { parent: name });
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form method="get" action="createTemplate" ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group">

    <label for="sel1">Topics (select one):</label>
    <select class="form-control" ng-model="selectedTopic">
        <option ng-repeat="topic in topics">{{topic.name}}</option>
    </select> <br>

    <label for="sel2">Subject (select one):</label>

    <select name="subject" class="form-control" ng-model="selectedSubject">
        <option ng-repeat="subject in subjects">{{subject.name}}</option>
    </select> <br>

    <input class="bg-primary" type="submit" value="submit and download template">

  </div>
</form>

＆＃13;

让我知道它是否有帮助！

HTTP GET函数中的参数未定义

2 个答案: