Unusual characteristics found in a select list controlled by Angular

Question

Unusual characteristics found in a select list controlled by Angular

The article titled "How to set the initial selected value of a select element using Angular.JS ng-options & track by" by @Meligy served as my guide while working on implementing a select list (ng-options). Despite achieving the desired basic functionality, as shown in this Test Plunk, I still encountered some odd behavior related to the selected item in the list when implemented on my development site.

app.controller("TaskEditCtrl", function($scope) {

  $scope.loadTaskEdit = loadTaskEdit;

  function loadTaskEdit() {
    taskLoadCompleted();
    tasktypesLoadCompleted();
  }

  function taskLoadCompleted() {
    $scope.tasks = [{
        Id: 1,
        Name: "Name",
        Description: "Description",
        TaskTypesId: 4
      }
    ];
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;    
  }

  function tasktypesLoadCompleted() {
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }];

    $scope.available_tasktypes_models = tasktypes    
  }

  $scope.submit = function(){
    alert('Edited TaskViewModel (New Selected TaskTypeId) > Ready for Update: ' + $scope.tasks[0].TaskTypesId);
  }

  loadTaskEdit();    
});

In the HTML:

<form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">        
        <div ng-repeat="task in tasks">             
          <div>
            <select ng-init="task.TaskTypes = {Id: task.TaskTypesId}" 
            ng-model="task.TaskTypes" 
            ng-change="task.TaskTypesId = task.TaskTypes.Id" 
            ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id">
            </select>
          </div>
        </div>

        <div class="">
          <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" />
        </div>

      </form>

Although the Test Plunk demonstrates the expected behavior, there are discrepancies between it and my actual implementation. I have included five explanatory images to help pinpoint the issue.

I am struggling with identifying the source of the problem. My intuition suggests a CSS issue may be at play. Has anyone else encountered a similar dilemma? Any insights would be greatly appreciated.

[1 []2 []3 []4

As a novice in CSS, any suggestions or advice are welcome!

CSS https://i.sstatic.net/4oCj9.png

    #region "style sheets"
    bundles.Add(new StyleBundle("~/Content/css").Include(
         "~/Content/css/site.css",
         "~/content/css/bootstrap.css",
         "~/content/css/bootstrap-theme.css",
         "~/Content/css/font-awesome.css",
         "~/Content/css/morris.css",
         "~/Content/css/toastr.css",
         "~/Content/css/jquery.fancybox.css",
         "~/Content/css/loading-bar.css"));
    #endregion "style sheets"

javascript jquery css angularjs

Answer 1

Answer №1

To make the dropdown work correctly, you need to ensure that the model is set to the selected object rather than just the ID of the item. I have made some changes to your code to achieve the desired functionality.

The main differences are:

Assign the ng-model of the dropdown to the selected object instead of the ID of the selected item. This way, you can access all properties of the selected object.
Remove the ng-change binding as it is not needed with two-way data binding. The value on the model (defined by ng-model) will automatically update.
In your HTML, you were referencing properties that were not declared in the Controller $scope. I have updated them to match the available variables in scope.

To learn more about working with dropdowns, refer to the Angular documentation. It provides valuable information for troubleshooting similar issues: https://docs.angularjs.org/api/ng/directive/select

// Your revised code

var app = angular.module("myApp", []);

app.controller("TaskEditCtrl", function($scope) {

  $scope.tasks = {};
  $scope.current_task_tasktypesid = null;
  $scope.selected_task_tasktype = null;

  $scope.loadTaskEdit = loadTaskEdit;

  function loadTaskEdit() {
    taskLoadCompleted();
    tasktypesLoadCompleted();

    
    // Default dropdown selected value
    $scope.selected_task_tasktype = $scope.available_tasktypes_models[2];
  }

  function taskLoadCompleted() {
    $scope.tasks = [{
        Id: 1,
        Name: "Name",
        Description: "Description",
        TaskTypesId: 4
      }
    ];
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;

  }

  function tasktypesLoadCompleted() {
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }];
    
    $scope.available_tasktypes_models = tasktypes

  }
  
  $scope.submit = function(){
    alert('submitted model: ' + $scope.selected_task_tasktype.Id);
  }

  loadTaskEdit();

});

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="TaskEditCtrl as edit">

  <form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">

    <div ng-repeat="task in available_tasktypes_models">
      
      <div>Task (Id): {{task.Id}}</div>
      <div>Name: {{task.Name}}</div>
      <div>Descripton: {{task.Description}}</div>
     </div>     
      <p>Current Task.TaskTypesId: {{selected_task_tasktype.Id}}</p>

      <div>
        <select
        ng-model="selected_task_tasktype" 
        ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id">
        </select>
      </div>
      <p>{{task.TaskTypes}}</p>
      <p>{{selected_task_tasktypesid = task.TaskTypes}}</p>
      
    

    <div class="">
      <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" />
    </div>

  </form>

</body>

</html>

Answer 2

To make the dropdown work correctly, you need to ensure that the model is set to the selected object rather than just the ID of the item. I have made some changes to your code to achieve the desired functionality.

The main differences are:

Assign the ng-model of the dropdown to the selected object instead of the ID of the selected item. This way, you can access all properties of the selected object.
Remove the ng-change binding as it is not needed with two-way data binding. The value on the model (defined by ng-model) will automatically update.
In your HTML, you were referencing properties that were not declared in the Controller $scope. I have updated them to match the available variables in scope.

To learn more about working with dropdowns, refer to the Angular documentation. It provides valuable information for troubleshooting similar issues: https://docs.angularjs.org/api/ng/directive/select

// Your revised code

var app = angular.module("myApp", []);

app.controller("TaskEditCtrl", function($scope) {

  $scope.tasks = {};
  $scope.current_task_tasktypesid = null;
  $scope.selected_task_tasktype = null;

  $scope.loadTaskEdit = loadTaskEdit;

  function loadTaskEdit() {
    taskLoadCompleted();
    tasktypesLoadCompleted();

    
    // Default dropdown selected value
    $scope.selected_task_tasktype = $scope.available_tasktypes_models[2];
  }

  function taskLoadCompleted() {
    $scope.tasks = [{
        Id: 1,
        Name: "Name",
        Description: "Description",
        TaskTypesId: 4
      }
    ];
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;

  }

  function tasktypesLoadCompleted() {
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }];
    
    $scope.available_tasktypes_models = tasktypes

  }
  
  $scope.submit = function(){
    alert('submitted model: ' + $scope.selected_task_tasktype.Id);
  }

  loadTaskEdit();

});

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="TaskEditCtrl as edit">

  <form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">

    <div ng-repeat="task in available_tasktypes_models">
      
      <div>Task (Id): {{task.Id}}</div>
      <div>Name: {{task.Name}}</div>
      <div>Descripton: {{task.Description}}</div>
     </div>     
      <p>Current Task.TaskTypesId: {{selected_task_tasktype.Id}}</p>

      <div>
        <select
        ng-model="selected_task_tasktype" 
        ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id">
        </select>
      </div>
      <p>{{task.TaskTypes}}</p>
      <p>{{selected_task_tasktypesid = task.TaskTypes}}</p>
      
    

    <div class="">
      <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" />
    </div>

  </form>

</body>

</html>

Answer 3

Answer №2

Initially, I must acknowledge the implementation by @Meligy and the proposed input of 'dball' as valid. Therefore, proceed in accordance with your preference.

Pay attention to your style sheets.

In conclusion, I have determined that the 'color' style property with a value of 'white' in selector #editTaskWrapper, acting as the identifier of the parent element

<div id="editTaskWrapper">

is causing issues. Interestingly, commenting out 'color: white' in

#editTaskWrapper {
    background-color: #337AB7;
    /*color: white;*/
    padding: 20px;
}

results in the selected item in the selectlist becoming visible. This change only affects the visibility of the selected list item, leaving all other controls and values unaffected.

Answer 4

Initially, I must acknowledge the implementation by @Meligy and the proposed input of 'dball' as valid. Therefore, proceed in accordance with your preference.

Pay attention to your style sheets.

In conclusion, I have determined that the 'color' style property with a value of 'white' in selector #editTaskWrapper, acting as the identifier of the parent element

<div id="editTaskWrapper">

is causing issues. Interestingly, commenting out 'color: white' in

#editTaskWrapper {
    background-color: #337AB7;
    /*color: white;*/
    padding: 20px;
}

results in the selected item in the selectlist becoming visible. This change only affects the visibility of the selected list item, leaving all other controls and values unaffected.

Unusual characteristics found in a select list controlled by Angular

Answer №1

Answer №2

Similar questions

How do you use CSS and Bootstrap to create a background image that covers one-third of the screen's size?

The Router.use() function is looking for a middleware function, but instead received an undefined value at the

The input texts are intertwined with one another through an autocomplete function

Navigating to a specific location and determining its boundaries using the selected location feature in react-leaflet

Uploading a Node.js Package to GitHub Packages - Issue ENEEDAUTH

How to align a child element in the center when the parent is not centered or taking up the full width

Utilize a WebGLRenderTarget in a recursive manner with the power of threejs and GLSL programming

A guide on incorporating the CSS 'content' property with the 'option' tag

Use jQuery to retrieve the number of items that have been selected in an ASP ListBox

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

Show validation message using Bootstrap near the submit button

How can I utilize match props in React JS with the Context API?

What is the purpose of Access-Control-Allow-Headers in an HTTP response and why is it important to include it?

Retrieve MongoDB collection using Node.js

Struggling to calculate the total of a property within an array of objects

Exploring Angular 2: Integrating External Libraries

Node.js is encountering an error with the post method where req.body is returning an empty

having difficulty grasping the variable's scope within this code

When utilizing a wrapped v-text-field, it triggers warning messages and fails to update the data properly

Find the IDs of all input boxes that have a specific class attached