Tips for assigning a value in a dropdown menu with AngularJS

Question

Tips for assigning a value in a dropdown menu with AngularJS

Can someone help me with setting the same value in multiple drop-down lists using angular.js? Below is an explanation of my code.

<table class="table table-bordered table-striped table-hover" id="dataTable">
  <tr>
    <td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
      <BR>Day <i class="fa fa-long-arrow-down"></i>
    </td>
    <td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour"></td>
  </tr>
  <tbody id="detailsstockid">
    <tr ng-repeat="days in noOfDays">
      <td width="100" align="center" style=" vertical-align:middle" ng-bind="days"></td>
      <td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours">
        <table style="margin:0px; padding:0px; width:100%">
          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="sub_name " ng-options="sub.name for sub in listOfSubjectName track by sub.value">  
            </select>
            </td>
          </tr>
          <tr>
            <td>
              <select id="coy" name="coy" class="form-control" ng-model="fac_name " ng-options="fac.name for fac in listOfFacultyName track by fac.value">  
            </select>
            </td>
          </tr>
      </td>
      </table>
      </td>
    </tr>
  </tbody>
</table>

The values are being set dynamically in each row of this table, and the values are the same for all rows and columns. The code for my controller file is provided below.

 $scope.noOfDays = [];

        $scope.days = {
          '0': "Monday",
          '1': 'Tuesday',
          '2': 'Wednesday',
          '3': 'Thursday',
          '4': 'Friday'
        }

        $scope.hours = [
          '9AM :: 10AM',
          '10AM :: 11AM',
          '11:15AM :: 12:15PM',
          '12:15PM :: 01:15PM',
          '02PM :: 03PM',
          '03PM :: 04PM',
          '04PM :: 05PM'
        ]

        for (var i = 0; i < 5; i++) {
          $scope.noOfDays.push($scope.days[i]);
        }
        $scope.listOfSubjectName=[{
        name: 'Select Course',
        value: ''
        }]
        $scope.listOfFacultyName=[{
        name: 'Select Faculty',
        value: ''
        }]

If I select a value from the Select Course dropdown list under '12:15PM :: 01:15PM', that selected value should automatically be set in the next 3 sets of times (

i.e. '02PM :: 03PM','03PM :: 04PM','04PM :: 05PM'

) and displayed in the Select Course dropdown lists corresponding to those times. I can select the value from anywhere, but once selected, it should be set in the next 3 dropdown lists. Can someone assist me with this functionality?

javascript angularjs

Answer 1

Answer №1

If you want to achieve the desired functionality, you can refer to the solution provided in this [jsFiddle]. To trigger changes in the next select items, ensure that you call a method on the ng-change event like shown below:

<select class="form-control" ng-model="sub_name[days + hour]" ng-change="setSub(days, hour)"  ng-options="sub.name for sub in listOfSubjectName track by sub.value">

The methods outlined should function as follows:

$scope.setFac = function(day, hour){
    console.log("set fac "+ day + ", " + hour);
    var next = 0;
    $scope.hours.forEach(function(hr){
        if(hr === hour || next){
            next++;
        }
        if(next > 0 && next < 4){
            $scope.fac_name[day + hr] = $scope.fac_name[day + hour];
        }
        else{
            // clear previous selection
            $scope.fac_name[day + hr] = null;
        }
    });
};  

$scope.setSub = function(day, hour){
    console.log("set sub "+ day + ", " + hour);
    var next = 0;
    $scope.hours.forEach(function(hr){
        if(hr === hour || next){
            next++;
        }
        if(next > 0 && next < 4){
            $scope.sub_name[day + hr] = $scope.sub_name[day + hour];
        }
        else{
            // clear previous selection
            $scope.sub_name[day + hr] = null;
        }
    });
};

To ensure proper functioning, it is crucial to assign unique identifiers to your models within each select item using the days and hour values. Failure to do so may result in all select elements acquiring the same value when one is selected.

EDIT: revised code according to feedback

Answer 2

If you want to achieve the desired functionality, you can refer to the solution provided in this [jsFiddle]. To trigger changes in the next select items, ensure that you call a method on the ng-change event like shown below:

<select class="form-control" ng-model="sub_name[days + hour]" ng-change="setSub(days, hour)"  ng-options="sub.name for sub in listOfSubjectName track by sub.value">

The methods outlined should function as follows:

$scope.setFac = function(day, hour){
    console.log("set fac "+ day + ", " + hour);
    var next = 0;
    $scope.hours.forEach(function(hr){
        if(hr === hour || next){
            next++;
        }
        if(next > 0 && next < 4){
            $scope.fac_name[day + hr] = $scope.fac_name[day + hour];
        }
        else{
            // clear previous selection
            $scope.fac_name[day + hr] = null;
        }
    });
};  

$scope.setSub = function(day, hour){
    console.log("set sub "+ day + ", " + hour);
    var next = 0;
    $scope.hours.forEach(function(hr){
        if(hr === hour || next){
            next++;
        }
        if(next > 0 && next < 4){
            $scope.sub_name[day + hr] = $scope.sub_name[day + hour];
        }
        else{
            // clear previous selection
            $scope.sub_name[day + hr] = null;
        }
    });
};

To ensure proper functioning, it is crucial to assign unique identifiers to your models within each select item using the days and hour values. Failure to do so may result in all select elements acquiring the same value when one is selected.

EDIT: revised code according to feedback

Answer 3

Answer №2

When an item is selected in the control, both the control's value and listOfSubjectName.name are bound together. This means that changing either listOfSubjectName.name in JavaScript or the value in the control will automatically update the other. If listOfSubjectName.name is set to 0, then that specific item should be selected.

The listOfSubjectName variable is an array where its name property must be assigned one of the objects within it. You can modify this by updating the code below:

$scope.listOfSubjectName = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
// The default selected value is $scope.listOfSubjectName[0], but you can change it to $scope.listOfSubjectName[1]
$scope.sub_name= $scope.listOfSubjectName[1];
// Add the selected subject name into the FacultyName array
$scope.listOfFacultyName=[{
    name: 'Select Faculty',
    value: '',
    currentsubjectName:$scope.sub_name,
}]

Make sure to review the HTML section below for proper implementation:

<select id="coy" name="coy" class="form-control" ng-model="fac_name.currentsubjectName" ng-options="fac.name for fac in listOfFacultyName track by fac.value">

Answer 4

When an item is selected in the control, both the control's value and listOfSubjectName.name are bound together. This means that changing either listOfSubjectName.name in JavaScript or the value in the control will automatically update the other. If listOfSubjectName.name is set to 0, then that specific item should be selected.

The listOfSubjectName variable is an array where its name property must be assigned one of the objects within it. You can modify this by updating the code below:

$scope.listOfSubjectName = [{ name: "a", id: 1 }, { name: "b", id: 2 }];
// The default selected value is $scope.listOfSubjectName[0], but you can change it to $scope.listOfSubjectName[1]
$scope.sub_name= $scope.listOfSubjectName[1];
// Add the selected subject name into the FacultyName array
$scope.listOfFacultyName=[{
    name: 'Select Faculty',
    value: '',
    currentsubjectName:$scope.sub_name,
}]

Make sure to review the HTML section below for proper implementation:

<select id="coy" name="coy" class="form-control" ng-model="fac_name.currentsubjectName" ng-options="fac.name for fac in listOfFacultyName track by fac.value">

Tips for assigning a value in a dropdown menu with AngularJS

Answer №1

Answer №2

Similar questions

Express Node.js Error: Address Information Syntax Issue

In Vue, while templates cannot be assigned keys and cannot be replaced with a div element, it is important to utilize the v-for directive without a wrapper div element, especially when dealing with nested v-for loops

Rename multiple files in bulk

Obtaining a complex object from a Checkbox set in AngularJS through the use of ngModel

Issues persist with redirection when using AJAX and PHP in a login form, resulting in the user staying on the index page

Leverage backend data in Angular-Google-Chart without the need for AJAX requests

Importing a file using its absolute path in JavaScript

Webpack dynamically imports files from a folder

Display thumbnail images in jquery-ui dropdown menu

Best practices for managing user authentication

Transfer a file to Amazon S3 using the Microsoft Office Add-In

Having trouble deleting multiple rows with ng-repeat in datatables

Using CSS or Javascript, you can eliminate the (textnode) from Github Gist lists

Quasar unable to detect vuex store

Dynamic sliding box jumps instead of simply fading in/out

How can we eliminate all elements from jQuery except for the first and second elements?

Sorting WordPress entries by nearby locations

Accessing data from localhost using Vue.js and Axios is restricted due to CORS policy and the error "Access to XMLHttpRequest" may be

Taking steps when a number is enclosed within a span

It is advised not to use arrow functions to assign data when fetching API data with axios in Vue.js 2