Angularjs选择选项问题

我是angularjs的新手。我想要做的是当我从selectbox1中选择一个选项并且selectbox2的值根据selectbox1中的值而改变时。Angularjs选择选项问题

对于实施例：如果用户从selectbox1和selectbox2选择前端需要显示的值是'css, jquery, html, angularjs'，但在这里，当我请从selectbox1任何选项。它显示'php, ruby, c#, python'，任何想法我做错了什么。请帮帮我。

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() { 
 
     angular.forEach($scope.data, function (value, key) { 
 
      $scope.values = value; 
 
     }); 
 
     } 
 

 
    });

<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" 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>

来源

2017-04-14 vijay

嘛，想想你的代码做什么：当selectvalues（）被调用，它不使用什么在第一个选择框中选择的用户，将其存储到$范围。选择。相反，它只是遍历$ scope.data的所有值并将最后一个存储在$ scope.values中。 –

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

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

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

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' 
 
     }] 
 
    }; 
 

 
    });

<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>

来源

2017-04-14 06:20:44

嗨，谢谢你的回答，但是为什么在顶部添加空值 – vijay

最好使用'ng-options'而不是'ng-repeat'.see更新答案。 –

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

<!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>

来源

2017-04-14 06:20:51 Nitheesh

感谢您的回答.. – vijay

Angularjs选择选项问题

回答

相关问题