Question

好的，将从第一个下拉列表中选择一个关键字，并根据第二个下拉列表选择＆＃34;限定符＆＃34;将填充。我无法在限定符下拉列表中填充任何内容，我将如何将关键字传递给服务？或者我已经使用ng-change="getQualifier(keyword)"进行了此操作，但我可能需要修改服务以获取参数吗？

这是我的角度控制器，可以处理这些下拉列表

var StockItemMultiMillInquiryController = function ($scope, $sce, $rootScope, $modal, $window, StockItemMultiMillService, QualifierService, KeywordService) {


$rootScope.title = 'Stock Item Multi Mill Inquiry';
$scope.allMills = [];
$scope.mill = '';
$scope.stockNumber = '';
$scope.description = '';
$scope.qtyonhand = '';
$scope.qualifier = '';
$scope.costType = '';
$scope.keyword = '';
$scope.allKeywords = [];
$scope.qualifier = '';
$scope.selectedQualifier = '';
$scope.allQualifiers = [];


KeywordService.getKeyword().then(function (keywords) {
    $scope.allKeywords = keywords
});

$scope.getQualifiers(keyword)
{
    QualifierService.getQualifier(keyword).then(function(qualifiers) {
        $scope.allQualifiers = qualifiers
    });
}

正在使用的服务

app.service('QualifierService', function ($http, cache) {
return {
    getQualifier: function () {
        var qualifiers = cache.get('qualifier');
        if (!qualifiers) {
            return $http({ method: 'JSONP', url: "/api/core/qualfier/qualifier?callback=JSON_CALLBACK", params: {} }).then(function (result) {
                if (result.data.success) {
                    cache.put('qualifier', result.data.data);
                    return result.data.data;
                } else {
                    return [];
                }
            });
        } else {
            var deferred = $q.defer();
            deferred.resolve(qualifiers);
            return deferred.promise;
        }
    }
};
});

htm页面

<select class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="keyword" ng-change="getQualifier(keyword)">
    <option value="">Select a Keyword</option>
    <option ng-repeat="keyword in allKeywords" value="{{keyword.description}}"> {{keyword.description}} </option>
</select><br/><br/>

<select  class="btn btn-info dropdown-toggle" style="width: 92%" ng-model="selectedQualifier">
    <option value="">Select a Qualifier</option>
    <option ng-repeat="qualifier in allQualifiers" value="{{qualifier.description}}"> {{qualifier.description}} </option>
</select>

服务调用的.Net控制器

  Function Qualifier(callback As String, keyword As String) As ActionResult
    Dim res As New PCA.Core.Web.JSON.Response

    Dim qualifierList As New List(Of ViewModels.Core.Qualifier)
    For Each u As Trident.Core.Core.Qualifier In Trident.Core.Globals.TridentApp.ApplicationCache.Keywords.Qualifiers(keyword)
        qualifierList.Add(New ViewModels.Core.Qualifier(u))
    Next
    Try
        res.success = True
        res.message = ""
        res.data = qualifierList.OrderBy(Function(c) c.description)
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    Catch ex As Exception
        res.success = False
        res.message = ex.Message
        res.data = ""
        Return New PCA.Core.Web.JSON.JSONPResult() With { _
             .Data = res,
             .Callback = callback
            }
    End Try
End Function

Answer 1

在第一个下拉列表中添加ng-change，因为当select元素的值发生更改时触发，而不是数据。

Answer 2

这是一个简单的工作示例：

的index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script src="ctrl.js"></script>
  </head>
  <body>
    <div ng-app="app" ng-controller="moviesCtrl">
      <h1>Movies By My Favorite Directors</h1>
      <select ng-model="director">
        <option ng-repeat="director in directors" value="{{ director.id }}">{{ director.name }}</option>
      </select>
      <select ng-model="film">
        <option ng-repeat="film in movies[director].films" value="{{ film.id }}">{{ film.title }} starring {{ film.lead }}</option>
      </select>
    </div>
  </body>
</html>

ctrl.js

angular.module('app', []).controller('moviesCtrl', function($scope) {
  $scope.directors = [
    {
      id: 0,
      name: "Stanley Kubrick"
    },
    {
      id: 1,
      name: "Quentin Tarantino"
    }
  ];
  $scope.movies = [
    {
      directorId: 0,
      films: [
        {
            id: 0,
          title: "The Shining",
          lead: "Jack Nicholson"
        },
        {
            id: 1,
          title: "A Clockwork Orange",
          lead: "Malcolm McDowell"
        },
        {
            id: 2,
          title: "2001: A Space Odyssey",
          lead: "Keir Dullea"
        }
      ]
    },
    {
      directorId: 1,
      films: [
        {
            id: 3,
          title: "Pulp Fiction",
          lead: "John Travolta"
        },
        {
            id: 4,
          title: "Inglorious Buddies",
          lead: "Brad Pitt"
        },
        {
            id: 5,
          title: "Django Unchained",
          lead: "Jamie Foxx"
        }
      ]
    },
  ];
});

出于某种原因，这不适用于jsFiddle，但它适用于Chrome。

使用ng-change根据另一个dorpdown的选择来填充一个dorpdown。 AngularJS

2 个答案:

的index.html

ctrl.js