CODEWITHSUNDEEP
angularjs
vijay
vijay

Reputation: 332

Angularjs Select options issue

I'm new to angularjs. what i'm trying to do is this when i select an options from selectbox1 and selectbox2 value changes according to that value from selectbox1.

For Example: if the user choose Frontend from selectbox1 and selectbox2 need to display values are 'css, jquery, html, angularjs', but here when i choose any options from selectbox1. it display 'php, ruby, c#, python', any idea what i'm doing wrong. please help me.

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>

Upvotes: 0

Views: 69

Answers (2)

Hadi
Hadi

Reputation: 17289

It should be like this. you have some problems.

The option value for first select tag was incorrect.

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

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Try this. Change the value of select option, from FrontEnd to frontend. and now on changing the select option, the ng-model for your select will be frontend or Server and on the controller use $scope.values = $scope.data[$scope.select] in your change event. That will solve your issue.

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

Upvotes: 1

Related Questions