Question

我有3个选择列表作为＆＃39; 语言＆＃39;，＆＃39; 新闻提供商＆＃39; ＆安培; ＆＃39; 新闻类别＆＃39;。
我想在新闻提供商＆＃39; 新闻提供商＆＃39;中启用/停用选项＆安培; ＆＃39; 新闻类别＆＃39;基于＆＃39; 语言＆＃39;的价值我有以下代码：

＆＃13;

$scope.languages = [
                      {"lang": "English"},
                      {"lang": "French"},
                      {"lang": "Portuguese"}
                    ];
$scope.providers = [
                      {"provider": "BBC"},
                      {"provider": "CNN"}
                    ];
$scope.categories = [
                       {"category": "General"},
                       {"category": "Sport"}
                    ];
$scope.formInfo.language     = $scope.languages[0];
$scope.formInfo.newsProvider = $scope.providers[0];
$scope.formInfo.newsCategory = $scope.categories[0];

＆＃13;

<div class="form-group">
    <label for="language" class="col-sm-2 control-label">Language:</label>
    <div class="col-sm-4">
      <select name="language" class="form-control" id="language" ng-model='formInfo.language'  ng-options='language.lang for language in languages'></select>
    </div>
  </div>
  <div class="form-group">
    <label for="newsProvider" class="col-sm-2 control-label">News Provider:</label>
    <div class="col-sm-4">
      <select name="newsProvider" class="form-control" id="newsProvider" ng-model='formInfo.newsProvider'  ng-options='provider.provider for provider in providers'></select>
    </div>
  </div>
  <div class="form-group">
    <label for="newsCategory" class="col-sm-2 control-label">News Category:</label>
    <div class="col-sm-4">
      <select name="newsCategory" class="form-control" id="newsCategory" ng-model='formInfo.newsCategory'  ng-options='category.category for category in categories'></select>
    </div>
  </div>

＆＃13;

如何实现理想的行为？任何帮助都会非常友好

Answer 1

我按如下方式更改了代码，现在效果很好。

$scope.languages = [
                      {"language": "English", "value": "English"},
                      {"language": "French", "value": "French"},
                      {"language": "Portuguese", "value": "por"}
                    ];
  $scope.providers = [
                      {"provider": "BBC", "lang": ["English", "French", "Portuguese"]},
                      {"provider": "CNN", "lang": ["English"]}
                    ];
  $scope.categories = [
                       {"category": "General", "lang": ["English", "French", "Portuguese"]},
                       {"category": "Sport", "lang": ["English"]}
                    ];

<div class="form-group">
    <label for="language" class="col-sm-2 control-label">Language:</label>
    <div class="col-sm-4">
      <select name="language" class="form-control" id="language" ng-model='formInfo.language'  ng-options='language.value as language.language for language in languages'></select>
    </div>
  </div>
  <div class="form-group">
    <label for="newsProvider" class="col-sm-2 control-label">News Provider:</label>
    <div class="col-sm-4">
      <select name="newsProvider" class="form-control" id="newsProvider" ng-model='formInfo.newsProvider'  ng-options='provider.provider for provider in providers | filter:{lang:formInfo.language}'></select>
    </div>
  </div>
  <div class="form-group">
    <label for="newsCategory" class="col-sm-2 control-label">News Category:</label>
    <div class="col-sm-4">
      <select name="newsCategory" class="form-control" id="newsCategory" ng-model='formInfo.newsCategory'  ng-options='category.category for category in categories | filter:{lang:formInfo.language}'></select>
    </div>
  </div>

AngularJS：根据另一个选择列表

1 个答案: