Observing ng-model within various nested ng-repeat loops

Question

Observing ng-model within various nested ng-repeat loops

Here is a snippet of code that I am struggling with:


    <div ng-repeat="category in categories">
        <div ng-repeat="(key, value) in category">
            {{ key + ":"}}
            <select id={{key}} class="my_select"
                    data-ng-model="key.type"
                    data-ui-select2="{}" multiple>
                <option ng-repeat="c in value"
                        ng-selected="(filters[key].length>0) && (filters[key].indexOf(c.trim()) !== -1)" >
                    {{c.trim()}}</option>
            </select>

        </div>
    </div>

In my controller, I have the following code which does not seem to work (console log does not display anything when selection changes):

$scope.$watch('key.type', function(newValue, oldValue){
console.log("" +newValue + " " + oldValue);
}, true);

I'm looking for a way to watch these selects in this specific situation. I have tried various solutions related to Angular, ng_repeat, and ng_model but none of them have resolved my issue. Any assistance would be greatly appreciated.

This is what I aim to achieve: I have categories like [{category : [ laptop, TV]}, {cpu : [ Core i5, Core i7]}] and I want to create two select elements to retrieve selected data using select2 with multiple items.

javascript angularjs

Answer 1

Answer №1

Utilizing the ng-repeat directive creates a specific scope that is only accessible within the designated block for ng-repeat. This block inherits all properties from its parent block.

Essentially, this setup enables access to the key property within the ng-repeat block but restricts access outside of it, preventing functionality like placing a $watch.

To address this issue, you should utilize the ng-change directive, specifically designed to respond to changes in the select tag.

To implement this directive, add it to the select tag as shown below:

<div ng-repeat="category in categories">
    <div ng-repeat="(key, value) in category">
        {{ key + ":"}}
        <select id={{key}} class="my_select"
            data-ng-model="key.type"
            data-ui-select2="{}"
            data-ng-change="changeInSelect(key, value)" multiple>
            <option ng-repeat="c in value"
                ng-selected="(filters[key].length>0) && 
                (filters[key].indexOf(c.trim()) !== -1)" >
                    {{c.trim()}}
            </option>
        </select>
    </div>
</div>

Next, define a function in your controller to handle this directive:

$scope.changeInSelect = function (key, value) {
    // Add your custom logic here
};

Answer 2

Utilizing the ng-repeat directive creates a specific scope that is only accessible within the designated block for ng-repeat. This block inherits all properties from its parent block.

Essentially, this setup enables access to the key property within the ng-repeat block but restricts access outside of it, preventing functionality like placing a $watch.

To address this issue, you should utilize the ng-change directive, specifically designed to respond to changes in the select tag.

To implement this directive, add it to the select tag as shown below:

<div ng-repeat="category in categories">
    <div ng-repeat="(key, value) in category">
        {{ key + ":"}}
        <select id={{key}} class="my_select"
            data-ng-model="key.type"
            data-ui-select2="{}"
            data-ng-change="changeInSelect(key, value)" multiple>
            <option ng-repeat="c in value"
                ng-selected="(filters[key].length>0) && 
                (filters[key].indexOf(c.trim()) !== -1)" >
                    {{c.trim()}}
            </option>
        </select>
    </div>
</div>

Next, define a function in your controller to handle this directive:

$scope.changeInSelect = function (key, value) {
    // Add your custom logic here
};

Answer 3

Answer №2

One solution I discovered was to make modifications to the select2.js file that incorporates select2 into Angular.

    $timeout(function () {
      elm.select2(opts);

      // Set initial value - Unsure if necessary, but seems to be required
      elm.select2('data', controller.$modelValue);
      elm.on('change', function(a){
          scope.$emit('select2:change', a);
      });

You can then utilize the following code in your controller to monitor changes:

    $scope.$on('select2:change', function (event, element) {

    if(element.added){
        console.log(element);
        console.log(event);
        $scope.updateCategories(event.targetScope.key, element.added.text.trim());
    }
    if(element.removed){
        console.log("Removed");
        $scope.cleanUpOldStuff(event.targetScope.key, element.removed.text.trim());
    }
});

While not perfect, it gets the job done...

Answer 4

One solution I discovered was to make modifications to the select2.js file that incorporates select2 into Angular.

    $timeout(function () {
      elm.select2(opts);

      // Set initial value - Unsure if necessary, but seems to be required
      elm.select2('data', controller.$modelValue);
      elm.on('change', function(a){
          scope.$emit('select2:change', a);
      });

You can then utilize the following code in your controller to monitor changes:

    $scope.$on('select2:change', function (event, element) {

    if(element.added){
        console.log(element);
        console.log(event);
        $scope.updateCategories(event.targetScope.key, element.added.text.trim());
    }
    if(element.removed){
        console.log("Removed");
        $scope.cleanUpOldStuff(event.targetScope.key, element.removed.text.trim());
    }
});

While not perfect, it gets the job done...

Observing ng-model within various nested ng-repeat loops

Answer №1

Answer №2

Similar questions

The directive fails to refresh when there are modifications made to the service model

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

Achieving full content height with sticky footer

Combining broken down values within a loop

Customize the number of slides in Glide.js after navigating using the controls

Interacting with a 3D model using the mouse cursor in a three

Error encountered with Angular-UI-Calendar: Attempting to access the 'length' property of an undefined value not allowed

Exploring the intricacies of password reset functionality in Node.js and Angular

JavaScript utilizes regex patterns to modify the value located between the characters within an input's name attribute

Please add color to the space beneath the line in a highchart

The controller method in Laravel is not being triggered by AJAX

What steps can be taken to issue an alert when the table does not contain any records?

What is the best way to modify the styling of my CSS attributes?

Is there a way to duplicate and insert a function in node.js if I only have its name?

Adjust the body class dynamically based on the URL in AngularJS

When I press the play button, the sound doesn't start playing

Utilizing JavascriptExecutor to assign attribute based on name

<a href> click here to append a new query parameter to the existing ones

Issues with displaying images in Fancybox

Encountering a NextJS error with head component