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選擇選項問題

回答

相關問題