Question

我是angularjs的新手。我正在尝试做的是当我从selectbox1中选择一个选项时，selectbox2值会根据selectbox1中的值进行更改。

例如：如果用户从selectbox1中选择前端而selectbox2需要显示值为src，但是当我从selectbox1中选择任何选项时。它显示.attr("src", function(i, src) { return /^\/content/.test(obj.picture.thumbnail) ? src + ".jpg" : src })，知道我做错了什么。请帮帮我。

'css, jquery, html, angularjs'

'php, ruby, c#, python'

Answer 1

应该是这样的。你有一些问题。

第一个选择标记的选项值不正确。

          <option value="frontend">FrontEnd</option>
          <option value="Server">Server</option>

＆＃13;

angular.module("ctrl", [])
  .controller("appsctrl", function($scope) {
    $scope.data = {
      "frontend": [{
        id: 1,
        name: 'css'
      }, {
        id: 2,
        name: 'jquery'
      }, {
        id: 3,
        name: 'html'
      }, {
        id: 4,
        name: 'angularjs'
      }],
      "Server": [{
        id: 1,
        name: 'php'
      }, {
        id: 2,
        name: 'ruby'
      }, {
        id: 3,
        name: 'c#'
      }, {
        id: 4,
        name: 'python'
      }]
    };

  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ctrl" ng-controller="appsctrl">
  <div class="selectvalues">
    <select class="form" ng-model="select">
          <option value="">Select</option>
          <option value="frontend">FrontEnd</option>
          <option value="Server">Server</option>
        </select>
    <select class="form" ng-model="select_list" ng-options="value.id as value.name for value in data[select]">
       <option value="" style="display:none">Select</option>
        </select>
  </div>
</div>

＆＃13;

Answer 2

试试这个。更改选择选项的值，从FrontEnd更改为frontend。现在，在更改选择选项时，您的选择的ng-model将为frontend或Server，并且控制器会在您的更改事件中使用$scope.values = $scope.data[$scope.select]。这将解决您的问题。

＆＃13;

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>


<body>
    <div ng-app="ctrl" ng-controller="appsctrl">
      <div class="selectvalues">
        <select class="form" ng-model="select" ng-change=selectvalues()>
              <option value="">Select</option>
              <option value="frontend">FrontEnd</option>
              <option value="Server">Server</option>
            </select>
        <select class="form" ng-model="select_list">
              <option value="">Select</option>
              <option ng-repeat ="value in values" value ="{{value.name}}">{{value.name}}</option>
            </select>
      </div>
    </div>

    <script type="text/javascript">
        angular.module("ctrl", [])
        .controller("appsctrl", function ($scope) {
          $scope.data = {
            frontend: [{ id: 1, name: 'css' }, { id: 2, name: 'jquery' }, { id: 3, name: 'html' }, { id: 4, name: 'angularjs' }],
            Server: [{ id: 1, name: 'php' }, { id: 2, name: 'ruby' }, { id: 3, name: 'c#' }, { id: 4, name: 'python' }]
          };

          $scope.selectvalues = function () {
              $scope.values = $scope.data[$scope.select];
          }

        });
    </script>
</body>

</html>

＆＃13;

Angularjs选择选项问题

2 个答案: