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

Is there a way to ensure that the await subscribe block finishes before moving on to the next line of code?

Is there a way for me to replicate the reloading problem that occurs when a button is clicked within an HTML

Troubleshooting the Height Problem in Material-UI's Menu

What is the process for saving appends to variables and converting them to PHP for storage in a database?

Create a basic search functionality in an Express Node.js application

Form Validation Using a Separate Function

The CssDependency dependency type in vue-cli@3 does not have any module factory available

Locate the next element with the same class using jQuery across the entire document

Tips for filling jstree with information in Grails

Using Typescript with d3 Library in Power BI

How to utilize DefinePlugin in Webpack to pass NODE_ENV value

Error in Express Post Request: Headers cannot be modified after being sent to the client

Discover the process for connecting to the 'OnOpen' listener for a uib-popover

Next.js React Hydration Issue - "Anticipated a corresponding <a> within the server HTML <a>"

Encountering invalid parameters while attempting to utilize the track.scrobble service from the Last.Fm API in a Node.js application

google maps traffic layer with the exact time stamp

What is the best way to automatically post to Slack at regular intervals?

Discover the position of the element that was clicked within the group of elements sharing the

Clicking on React Js reverses an array that had previously been unreversed

Navigating with useRouter().push() from the "next/navigation" package is not functioning as expected when used on a customized signIn page alongside next-auth