Angularjs Select options issue

Question

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>

Well, just think about what your code does: when selectvalues() is called, it doesn't use what the user selected in the first select box, which is stored into $scope.select. Instead, it just loops through all the values of $scope.data and stores tha last one in $scope.values. — JB Nizet
– JB Nizet, Commented Apr 14, 2017 at 6:23

Hadi · Accepted Answer · 2017-04-14 06:33:29Z

1

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>

edited Apr 14, 2017 at 6:33

answered Apr 14, 2017 at 6:20

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vijay Over a year ago

hi, thanks for your answer mate, but why the empty value is appended at the top

Hadi Over a year ago

It's better use ng-options instead of ng-repeat .see updated answer.

Nitheesh · Accepted Answer · 2017-04-14 06:20:51Z

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>

Collectives™ on Stack Overflow

Angularjs Select options issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related