Muddled understanding concerning the utilization of ng-options

Question

Muddled understanding concerning the utilization of ng-options

I am struggling with ng-options, as I have created a dropdown from an array defined in my controller. Below is my HTML code:

<div ng-app>
<div ng-controller="testCtrl">
    <select multiple="multiple" ng-model="first" ng-options="c.name for c in listObj">
    </select>
    <select multiple="multiple" ng-model="second">
    </select>
    <hr/>
    {{first}}
</div>
</div>

Here is the corresponding JavaScript code:

function testCtrl($scope) {
    $scope.listObj = [{name: "x", content: [1,2,3]},
                      {name: "y", content: [4,5,6]}];

}

You can view the working jsFiddle here:

http://jsfiddle.net/zono/rkBUL/10/

My goal is to have the right select box populated with the corresponding content property when a user selects an element from the left select box. For example:

If a user selects "x" from the left box, the right box should display 1,2,3. If "y" is added to the left box, it should display 1,2,3,4,5,6. If "x" is deselected, it should display 4,5,6.

Thank you in advance.

javascript angularjs

Answer 1

Answer №1

To avoid using a $watch like @package suggested, you can create a helper function in your controller that unpacks each value of content for every selected item in listObj and stores them in an array for the ng-options of your second select element.

$scope.contents = function(arr) {
    var values = [];
    if (angular.isDefined(arr)) {
        arr.forEach(function(v) {
            values = values.concat(v.content);
        });
    }
    return values;
};

Then, use:

ng-options="c for c in contents(first)"

Check out this demonstration on JSFiddle.

Answer 2

To avoid using a $watch like @package suggested, you can create a helper function in your controller that unpacks each value of content for every selected item in listObj and stores them in an array for the ng-options of your second select element.

$scope.contents = function(arr) {
    var values = [];
    if (angular.isDefined(arr)) {
        arr.forEach(function(v) {
            values = values.concat(v.content);
        });
    }
    return values;
};

Then, use:

ng-options="c for c in contents(first)"

Check out this demonstration on JSFiddle.

Answer 3

Answer №2

To capture changes in the $watch function, the first step is to monitor the first attribute. Once it changes, the content of all selected values needs to be extracted and stored in a new array, referred to as firstContent. The second select will display items from the firstContent array. Below is the revised code snippet from the updated JSFiddle:

<select multiple="multiple" ng-model="first" ng-options="c.name for c in listObj">
</select>
<select multiple="multiple" ng-model="second" ng-options="element for element in firstContent">
</select>

$scope.$watch('first', function(value) {
    if (!value) {
        return;
    }
    var firstContent = [];
    for (var i = 0; i < value.length; i++) {
        firstContent = firstContent.concat(value[i].content);
    }
    $scope.firstContent = firstContent;
});

Answer 4

To capture changes in the $watch function, the first step is to monitor the first attribute. Once it changes, the content of all selected values needs to be extracted and stored in a new array, referred to as firstContent. The second select will display items from the firstContent array. Below is the revised code snippet from the updated JSFiddle:

<select multiple="multiple" ng-model="first" ng-options="c.name for c in listObj">
</select>
<select multiple="multiple" ng-model="second" ng-options="element for element in firstContent">
</select>

$scope.$watch('first', function(value) {
    if (!value) {
        return;
    }
    var firstContent = [];
    for (var i = 0; i < value.length; i++) {
        firstContent = firstContent.concat(value[i].content);
    }
    $scope.firstContent = firstContent;
});

Muddled understanding concerning the utilization of ng-options

Answer №1

Answer №2

Similar questions

Strings within strings within strings - a triple layer of quotes

Eliminate repeat entries in MongoDB database

I am encountering issues with posting data when my custom class is initialized with a constructor

Error Type: Property 'history' is not defined and cannot be read

Preventing CSRF Errors when activating API endpoints in Node Express JS by ensuring that bypassing the error message with next() function is ineffective

Is your Vue.js chart malfunctioning?

An advanced password checker that notifies the user of any spaces in their password

Utilizing db.system.js Function within the $where Clause

Double-checked in p:commandButton, encountering a race condition with oncomplete

I am looking for a custom script for a splash page that will automatically redirect users to one of three designated pages based on the information stored

The issue of calling the child window function from the parent window upon clicking does not seem to be functioning properly on Safari and Chrome

simulated xhr server along with the locales in polymer appLocalizeBehavior

Decoding json data with targeted API keys

AngularJS : Resolving Alignment Issues with ng-repeat and ng-include

Managing time-intensive web service operations using JavaScript callbacks

Even after being removed, the input field in Firefox stubbornly maintains a red border

Step-by-step guide on using nodemon on a web hosting server

The constructor for audio in Next JS cannot be found

Utilize Meteor's ability to import async functions for seamless integration into method calls

Transfer responsibilities of events to the canvas and then fetch the Element in the handler