Issues related to ng-model within a dropdown list

Currently, I am facing an issue with retrieving the selected value from a select element using ng-model. Even though the value is displayed correctly on the application page, it remains at the initial value in the app controller. Despite my efforts to find a solution online, I have not found a satisfactory answer.

This is the select element:

<select  ng-model= "choice.selected" ng-init = "choice.selected = historicOptions[0].id" ng-options = "historicOption.id as historicOption.value for historicOption in historicOptions">            
</select>
<br> choice: {{choice.selected}}

Here are the options and the variable used to retrieve the selected value (initialized to a default value):

$scope.historicOptions = [
    {id: 0, value: "month"},
    {id: 1, value: "week"},
    {id: 2, value: "day"}
  ];
$scope.choice ={selected: 0};

EDIT

Below is my Angular application code (where I have added console.log() statements):

var app =  angular.module('AppEfergy', []);

app.factory('historicFactory',[function(){
  var h = {
    historic: []
  };

  h.createHistoric = function(choix){
    console.log("choix = ", choix);
     if(choix == 0){
     return h.historic = [
    {date:"October"   ,consumption:230},
    {date:"September" ,consumption:235},
    {date:"August"    ,consumption:235},
    {date:"July"      ,consumption:240}
    ];
  }
   else if(choix == 1){
     return h.historic = [
    {date:"28/09/2015 - 04/10/2015" ,consumption:52},
    {date:"05/10/2015 - 11/10/2015" ,consumption:55},
    {date:"12/10/2015 - 18/10/2015" ,consumption:48},
    {date:"19/10/2015 - 25/10/2015" ,consumption:50},
    {date:"26/10/2015 - 01/11/2015" ,consumption:49}
    ];
  }
   else if(choix == 2){
     return h.historic = [
    {date:"01/11/2015" ,consumption:10},
    {date:"31/10/2015" ,consumption:11},
    {date:"30/10/2015" ,consumption:9 },
    {date:"29/10/2015" ,consumption:8 },
    {date:"28/10/2015" ,consumption:8 },
    {date:"27/10/2015" ,consumption:10},
    {date:"26/10/2015" ,consumption:9 }

    ];
  }

  };
  return h;
}]);


app.controller('MainCtrl', ['$scope','historicFactory', function($scope, historicFactory){
  $scope.choice ={selected: 0};
  $scope.choiceBis ={selected: 0};

  $scope.historicOptions = [
    {id: 0, value: "month"},
    {id: 1, value: "week"},
    {id: 2, value: "day"}
  ];

  $scope.saveOptions = [
    {id: 0, value: -10},
    {id: 1, value: -5 },
    {id: 2, value: 5  },
    {id: 3, value: 10 } 
  ];

  $scope.currentValue = 237;
  $scope.cost = 21;
  $scope.saving = 3;

     $scope.historic = historicFactory.createHistoric($scope.choice.selected); 
  console.log("choice : ", $scope.choice.selected);


}]);

Furthermore, here is my HTML page structure:

<!DOCTYPE html>
<html>
  <head>
    <title>Efergy App</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href ="EfergyStyle.css">

    <!-- include Angular library-->
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

        <!-- include the AngularApp-->
    <script src="AppEfergy.js"></script>
  </head>

  <body ng-app = "AppEfergy", ng-controller = "MainCtrl">
    <header>
      Power Consumption
    </header> 
    <div class = "currentConsumption">
      <br><h2>Current Consumption</h2>
      <span class = "Value" ng-bind = "currentValue"></span>
      <span class="unit">kW</span>
    </div>

    <br>

    <div class = "historic">

      <h3>Historic</h3>
      Display an historic by 
      <select  ng-model= "choice.selected" ng-options = "historicOption.id as historicOption.value for historicOption in historicOptions">

      </select>
      <br> choice: {{choice.selected}}
     <br> 

      <table class = "historic">
        <tr>
          <th>Date</th>
          <th>Average consumption (kW)</th>
        </tr>
        <tr ng-repeat = "historics in historic">
          <td>
            {{historics.date}}
          </td>
          <td>
            {{historics.consumption}}
          </td>
        </tr>
      </table>

    </div>
  </body>
</html>
javascriptangularjs

Answer №1

To enhance the functionality of your controller, include the following code:

$scope.getSelectedValue = function() {
  console.log("choice : ", $scope.choice.selected);
  $scope.historic = historicFactory.createHistoric($scope.choice.selected);
};

Ensure to add this event to your select tag like so:

ng-change="getSelectedValue()"

If you are experiencing issues with your select functionality, it may be due to not calling a method upon selection change. This can result in a value of 0 being displayed in the console during the initial controller setup.

Feel free to review the sample plunker for reference here

Answer №2

If you prefer to retrieve the selected model instead of a string value, using ng-options is the way to go. Your example indicates that you are only expecting the index of the selected item.

Try this code instead:

<select ng-model="selected" 
ng-options="historicOption as historicOption.value for historicOption in historicOptions"></select>
<br> choice : {{selected.value}}

This is the Controller code:

$scope.historicOptions = [
{id: 0, value: "month"},
{id: 1, value: "week"},
{id: 2, value: "day"}
];
$scope.selected =$scope.historicOptions[0];

Check out the plunker for reference.

Update: If you simply want the id to be the option value and the value as the label, you can use select with ng-repeat.

<select ng-model="selected">
<option ng-repeat="option in historicOptions" 
value="{{option.id}}">{{option.value}}</option>
</select>
<br> choice : {{selected}}

$scope.historicOptions = [
{id: 0, value: "month"},
{id: 1, value: "week"},
{id: 2, value: "day"}
];
$scope.selected = 0;

Answer №3

It seems likely that this is just a piece of a larger puzzle rather than a standalone select box and value. Your template probably initiates a new child scope, which means that the initial $scope.choice = { selected: 0 }; doesn't actually set the selected values for the dropdown (you can test this by changing 'selected' to 1). Instead, the dropdown values are determined by the fact that 0 is the first entry.

When you change the dropdown value, you're essentially creating a property in the child scope (inheriting from the parent) without affecting the original choice property in the parent scope.

To resolve this issue, the simplest solution would be to reference the choice property in the parent scope using $parent.choice - although whether or not this is appropriate depends on the context of the rest of your code.

Here's an example template that highlights the problem:

Fiddle - https://jsfiddle.net/0un8p2dh/

Answer №4

Avoid using 

ng-init = "choice.selected = historicOptions[0].id"
as it will display the zero indexed value. Instead, remove this and consider using the code below. If you want to have a dropdown with a selected value, then you need to include the ng-change directive.

Your updated code should look like this:

var app = angular.module('AppEfergy', []);

app.factory('historicFactory', [
  function() {
    var h = {
      historic: []
    };
    h.createHistoric = function(choix) {
      console.log("choix = ", choix);
      if (choix == 0) {
        return h.historic = [{
          date: "October",
          consumption: 230
        }, {
          date: "September",
          consumption: 235
        }, {
          date: "August",
          consumption: 235
        }, {
          date: "July",
          consumption: 240
        }];
      } else if (choix == 1) {
        return h.historic = [{
          date: "28/09/2015 - 04/10/2015",
          consumption: 52
        }, {
          date: "05/10/2015 - 11/10/2015",
          consumption: 55
        }, {
          date: "12/10/2015 - 18/10/2015",
          consumption: 48
        }, {
          date: "19/10/2015 - 25/10/2015",
          consumption: 50
        }, {
          date: "26/10/2015 - 01/11/2015",
          consumption: 49
        }];
      } else if (choix == 2) {
        return h.historic = [{
          date: "01/11/2015",
          consumption: 10
        }, {
          date: "31/10/2015",
          consumption: 11
        }, {
          date: "30/10/2015",
          consumption: 9
        }, {
          date: "29/10/2015",
          consumption: 8
        }, {
          date: "28/10/2015",
          consumption: 8
        }, {
          date: "27/10/2015",
          consumption: 10
        }, {
          date: "26/10/2015",
          consumption: 9
        }];
      }
    };
    return h;
  }
]);


app.controller('MainCtrl', ['$scope', 'historicFactory',
  function($scope, historicFactory) {

    $scope.choice = {
      selected: 0
    };
    $scope.choiceBis = {
      selected: 0
    };

    $scope.historicOptions = [{
      id: 0,
      value: "month"
    }, {
      id: 1,
      value: "week"
    }, {
      id: 2,
      value: "day"
    }];

    $scope.saveOptions = [{
      id: 0,
      value: -10
    }, {
      id: 1,
      value: -5
    }, {
      id: 2,
      value: 5
    }, {
      id: 3,
      value: 10
    }];

    $scope.getSelectedValue = function() {
      console.log("choice : ", $scope.choice.selected);
      $scope.historic = historicFactory.createHistoric($scope.choice.selected);
    };

    $scope.currentValue = 237;
    $scope.cost = 21;
    $scope.saving = 3;

    $scope.historic = historicFactory.createHistoric($scope.choice.selected);
    console.log("choice : ", $scope.choice.selected);
  }
]);
<!DOCTYPE html>
<html>

<head>
  <title>Efergy App</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="EfergyStyle.css">

  <!-- include Angular library-->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>

  <!-- include the AngularApp-->
  <script src="AppEfergy.js"></script>
</head>

<body ng-app="AppEfergy" ng-controller="MainCtrl">
  <header>
    Power Consumption
  </header>
  <div class="currentConsumption">
    <br>
    <h2>Current Consumption</h2>
    <span class="Value" ng-bind="currentValue"></span>
    <span class="unit">kW</span>
  </div>
  <br>

  <div class="historic">

    <h3>Historic</h3>
    Display an historic by
    <select data-ng-model="choice.selected" data-ng-change="getSelectedValue()" data-ng-options="historicOption.id as historicOption.value for historicOption in historicOptions">
    </select>
    <br>choice : {{choice.selected}}
    <br>
    <table class="historic">
      <tr>
        <th>Date</th>
        <th>Average consumption (kW)</th>
      </tr>
      <tr ng-repeat="historics in historic">
        <td>{{historics.date}}
        </td>
        <td>{{historics.consumption}}
        </td>
      </tr>
    </table>

  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating fonts that adjust depending on the length of characters

Is there a way to adjust the font size of a paragraph based on the space available in its containing div, depending on the length of characters? For instance: p{ font-size:15px; } <div class="caption"> <p>Lorem ipsum dolor sit amet, consect ...

javascriptjqueryhtmlcss

Get the final element with a for loop in Angular 2

I am currently utilizing angular 2 in conjunction with mongoDb. The service I am employing is responsible for calling the API. Here is a snippet of my code: this.at represents a token, similar to fdfdsfdffsdf... This token serves as an authorization key ...

javascriptmongodbangular

Using Material-UI version 1, pass the outer index to the MenuItem component when clicked

Within my component, there is a Table that displays rows generated from a custom array of objects. In the last TableCell, I aim to include an icon button that, upon being clicked, opens a Menu containing various MenuItem actions (such as edit and delete). ...

javascriptreactjsmaterial-ui

Guide to extracting a key from the route module with the help of vuex-router-sync

I have a Vuex store setup as shown below, and I am using vuex-router-sync to keep it in sync. This plugin adds a router module to my store. However, I am unsure of how to retrieve this object from the store since there are no associated getters with this m ...

javascriptvue.jsvuejs2vuex

What causes the disparity in the functionality of getServerSideProps between index.js and [id].js in NextJS?

Exploring NextJS and React as part of my e-commerce site development journey has been exciting. However, I encountered a roadblock when trying to connect to an external database that requires real-time updates, making getStaticProps unsuitable for my needs ...

javascriptreactjsnext.js

Issue with 'backface-visibility' CSS3 property not functioning on any versions of Internet Explorer

I'm looking to implement a specific animation in Internet Explorer. The goal is to rotate an image like a coin, displaying a different image on the other side. I suspect that the issue lies with Backface-visibility in IE, but I'm not entirely sur ...

javascriptjqueryhtmlcss

Is using parameterized routes in Node.js a recommended practice or a mistake?

Here is the code snippet I'm working on: router.delete('/delete-:object', function(req, res) { var query; var id = req.body.id; switch (req.params.object) { case 'news' : query = queries['news_del ...

javascriptnode.jsexpress

What is the method for sending raw put data using the request npm package in a Node.js environment

How can I hit an API using the "require" npm package in Node? The API requires raw PUT data instead of PUT fields. Can anyone please guide me on how to achieve this using the request npm package? For example, here is the raw PUT data that needs to be sent ...

javascriptnode.jsrequestnpmput

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

Parent-Child Communication in VueJS 2.0: How to effectively pass data from the parent component

Does anyone know a straightforward solution to this issue? I've been struggling to find one. Within my HTML file, there's a button that looks like this: <button @click="showModal">Show Modal</button> By clicking on the button, it t ...

javascriptvue.jsvuejs2vue-component

Using the hover event in a jQuery plugin: A step-by-step guide

A star rating plugin I am developing is encountering an issue with implementing the hover event. jquery, (function($){ $.fn.extend({ rater: function(options) { var defaults = { } var options = $.exten ...

javascriptjqueryjquery-pluginsjquery-hover

Using the loop function within HTML in JavaScript with React

I'm trying to loop over my SliderComponent function with different inputs within the HTML to generate multiple components, but I can't seem to get it to work. I came across a solution online that involves building a string and returning it as HTM ...

javascripthtmlreactjsthree.jsgrommet

Guide to forming a JavaScript array from nested JSON data

Looking to parse through an array of objects related to London weather data from the OpenWeatherMap API. How can I create three distinct arrays in JavaScript, each with variable names "dtArray", "tempMinArray", and "tempMaxArray", containing only values f ...

javascriptarraysjson

Unable to install react-dom/test-utils using npm

I recently included two libraries in my package.json "devDependencies": { ... "react-dom/test-utils": "*", "react-test-renderer/shallow": "*" }, These were recommended by the React documentation to align with version 16 of the React ecosy ...

javascriptreactjsnpmnpm-installjestjs

Using AngularJS to access the properties of a header within a $http request

As I navigate through the github API's pagination documentation, I am attempting to retrieve event items and extract the Link header (as recommended) in order to construct the pagination. However, I am facing difficulty in understanding how to work wi ...

javascriptangularjspaginationhttp-headersrequest-headers

I am currently working on a project using ar.js

I came across a glitch code that triggers a video when scanning the marker. However, I encountered an issue where it only works on desktop. On Chrome for Android, the video does not appear, only the sound can be heard. I need assistance as my coding knowle ...

javascripthtmlthree.jsaframear.js

Tips for capturing an express proxy error in React?

I set up an express server as a proxy for my React app, but I am facing an issue where I cannot get the error response back in my React code. No matter if I use `return next(err)` or `res.send(err)`, the latter gets stuck in the `then` block and does not t ...

javascriptnode.jsreactjsexpressaxios

How to use AJAX script to call a non-static page method in ASP.NET

Is it possible to achieve this task without utilizing the UpdatePanel feature? ...

c#asp.netjavascriptajax

Display notification following successful data saving in CodeIgniter

I attempted to set up a notification to appear when saving data and displaying it in the view, but it didn't work as expected using notify.js. Can someone offer some assistance? This is my save function: function save() { $data = array( ...

javascriptphptwitter-bootstrapcodeigniter

What's the most effective method to incorporate additional events into this element using the conditional operator?

Looking for help with this code snippet: <span role="link" tabindex="0" :class="tabDetails.showPayment ? 'link' : ''" @click="tabDetails.showPayment ? cTab('payments') : null" ...

javascriptvue.js