Choose the current parent item using Angular's ng-selected and $index

Question

Choose the current parent item using Angular's ng-selected and $index

http://plnkr.co/edit/fwwAd4bn6z2vxVN2FUL7?p=preview

On the Plunker page linked above, I am trying to achieve a specific functionality. I would like the 3 dropdown lists to display values A, B, and C initially. When a 4th dropdown option is added, it should include value D as well. The requirement is that all alphabet letters should be selectable from the dropdown list.

<option ng-repeat="n in characters" ng-selected="$index == $parent.$index">{{n}}</option>

When you press ADD, the dropdown selections should show ABC selected initially and remain selected even after adding a new option. However, they are not staying selected. How can I make sure the selections stay selected?

javascript angularjs

Answer 1

Answer №1

To enhance the functionality of your select element, consider incorporating the ng-options directive.

Here's an example in HTML:

<div ng-app="app">
    <div ng-controller="mainController">
        <div ng-repeat="selected in selecteds track by $index">
            <select ng-model="selecteds[$index]" ng-options="character for character in characters">
            </select>
        </div>
        <button ng-click="addValue()">Add</button>
        <pre ng-bind="characters | json"></pre>
        <pre ng-bind="selecteds | json"></pre>
    </div>
</div>

Additionally, here's the corresponding JavaScript:

angular.module('app', [])
.controller('mainController', function($scope) {
    $scope.characters = ["A", "B", "C"];
    $scope.selecteds = ["A", "B", "C"];
    $scope.addValue = function() { 
        var currGroup = String.fromCharCode(65 + $scope.characters.length);
        $scope.characters.push(currGroup);
    }
});

If you'd like to see this in action, check out this live demo: http://jsfiddle.net/ben1729/djy5ooed/

Answer 2

To enhance the functionality of your select element, consider incorporating the ng-options directive.

Here's an example in HTML:

<div ng-app="app">
    <div ng-controller="mainController">
        <div ng-repeat="selected in selecteds track by $index">
            <select ng-model="selecteds[$index]" ng-options="character for character in characters">
            </select>
        </div>
        <button ng-click="addValue()">Add</button>
        <pre ng-bind="characters | json"></pre>
        <pre ng-bind="selecteds | json"></pre>
    </div>
</div>

Additionally, here's the corresponding JavaScript:

angular.module('app', [])
.controller('mainController', function($scope) {
    $scope.characters = ["A", "B", "C"];
    $scope.selecteds = ["A", "B", "C"];
    $scope.addValue = function() { 
        var currGroup = String.fromCharCode(65 + $scope.characters.length);
        $scope.characters.push(currGroup);
    }
});

If you'd like to see this in action, check out this live demo: http://jsfiddle.net/ben1729/djy5ooed/

Answer 3

Answer №2

Enhancing the options with value is essential. Here is a suggestion:

<option ng-repeat="item in choices" value="{{item}}" ng-selected="$index == $parent.$index">{{item}}</option>

Answer 4

Enhancing the options with value is essential. Here is a suggestion:

<option ng-repeat="item in choices" value="{{item}}" ng-selected="$index == $parent.$index">{{item}}</option>

Answer 5

Answer №3

I made some adjustments to your configuration in order to dynamically generate the existing options for your character collection and then add the dropdown menus dynamically:

Check out the updated Plnkr here

This process involves the following steps:

 $scope.characters = [];
 $scope.something = [{Name:"Obj1",Selected:"A"}, {Name:"Obj2",Selected:"B"},{Name:"Obj3",Selected:"C"}];

 angular.forEach($scope.something, function(obj, index) {
   $scope.characters.push(obj.Selected);
 });

 $scope.Add = function() {
   var newOption = String.fromCharCode(65 + $scope.characters.length);
   $scope.something.push({Name: "obj" + (parseInt($scope.characters.length) + 1), Selected: newOption});
   $scope.characters.push(newOption);  
 }

Answer 6

I made some adjustments to your configuration in order to dynamically generate the existing options for your character collection and then add the dropdown menus dynamically:

Check out the updated Plnkr here

This process involves the following steps:

 $scope.characters = [];
 $scope.something = [{Name:"Obj1",Selected:"A"}, {Name:"Obj2",Selected:"B"},{Name:"Obj3",Selected:"C"}];

 angular.forEach($scope.something, function(obj, index) {
   $scope.characters.push(obj.Selected);
 });

 $scope.Add = function() {
   var newOption = String.fromCharCode(65 + $scope.characters.length);
   $scope.something.push({Name: "obj" + (parseInt($scope.characters.length) + 1), Selected: newOption});
   $scope.characters.push(newOption);  
 }

Choose the current parent item using Angular's ng-selected and $index

Answer №1

Answer №2

Answer №3

Similar questions

Creating a dynamic search bar with multiple input fields in HTML

Ways to update list item text with jQuery

The Hidden Power of jQuery: Unleashing the Full Potential of .text()

NodeJS reference copying problem

Exploring Error Handling in AngularJS and How to Use $exceptionHandler

What causes the maximum update depth exceeded error in React when trying to set data to the context?

Displaying selected values in a Multi Select Listbox upon submission of the same form when an error occurs

Rendering template and data from a promise in AngularJS: A comprehensive guide

The Angular Google Maps Module fails to initialize

The React rendering process failed when attempting to utilize a stateless component

Error Occurs When Executing minall Task with Grunt Package (ubuntu and windows)

Exploring the process of breaking down a substantial string object into manageable key/value pairs using AngularJS

Issue with a input element having relative positioning within a flexbox

Tips for Resolving React.js Issues with setInterval

Vue 3 feature: Click the button to dynamically insert a new row into the grid

Sharing a Detailed Mongoose Schema

Rendering a Nativescript component once the page has been fully loaded

What is the significance of -= and += operators in JavaScript programming language?

Is there a way to showcase the string message from BadRequest(message) utilizing Ajax?

Disable the enter key from closing the alert box