ng-options dependent on the value selected previously

Question

ng-options dependent on the value selected previously

Below is an array that I'm working with.

$scope.set = [
{"name":"name1", "value":"value1"}
{"name":"name2", "value":"value2"}
{"name":"name3", "value":"value3"}
]

I want to display options based on previous selections. For example, if I choose name1, then next time I only want to see the remaining two options: name2 and name3.

I've been attempting this using filters but it seems to be affecting the model $scope.set.

Your assistance in resolving this issue would be greatly appreciated. Thank you in advance!

javascript angularjs

Answer 1

Answer №1

If you're looking for a solution to your issue, I've put together a helpful resource on Fiddle. Since there wasn't an original Fiddle in your post, I created one from scratch.

<div ng-app ng-controller="Controller">
    Select value : <b>{{myDropDown.name}}</b><br/><br/>
    Showing all other available options:
    <select ng-options="item.name for item in items | filter: {name: '!' + myDropDown.name}" ng-model="myDropDown">
      <option value="">Select other value</option>
    </select>
</div>

function Controller ($scope) {
    $scope.myDropDown = 'one';    
    $scope.items = [
        {"name":"name1", "value":"value1"},
            {"name":"name2", "value":"value2"},
            {"name":"name3", "value":"value3"}
    ];  
}

Answer 2

If you're looking for a solution to your issue, I've put together a helpful resource on Fiddle. Since there wasn't an original Fiddle in your post, I created one from scratch.

<div ng-app ng-controller="Controller">
    Select value : <b>{{myDropDown.name}}</b><br/><br/>
    Showing all other available options:
    <select ng-options="item.name for item in items | filter: {name: '!' + myDropDown.name}" ng-model="myDropDown">
      <option value="">Select other value</option>
    </select>
</div>

function Controller ($scope) {
    $scope.myDropDown = 'one';    
    $scope.items = [
        {"name":"name1", "value":"value1"},
            {"name":"name2", "value":"value2"},
            {"name":"name3", "value":"value3"}
    ];  
}

ng-options dependent on the value selected previously

Answer №1

Similar questions

What are the steps to generate a multiline chart using d3.js with json data specifically formatted for nvd3?

Display an Asterisk Icon for md-input fields with lengthy labels

How do I adjust brightness and contrast filters on a base64 URL?

Having trouble running the script, chrome error with message passing?

Leveraging an Array of Objects in JavaScript

Leveraging AngularJS services within an Angular service

navigating directly to a particular slide within a Bootstrap carousel on a different page by clicking

Converting the structure of an object into an array structure for highcharts can be achieved through

Using Node.js to implement pagination with the POKEapi through a loop

Electron and React: Alert - Exceeded MaxListenersWarning: Potential memory leak detected in EventEmitter. [EventEmitter] has 21 updateDeviceList listeners added to it

Contrasting results when logging an element in Chrome versus IE

Require assistance in generating three replicas of an object rather than references as it currently operates

"Troubleshooting: Why is TailwindCSS not functioning correctly in my NextJS

A custom Mongoose schema attribute configured with distinct values

Is there a similar alternative to ignoring in webpack or browserify?

What is the reason for `then` generating a new promise rather than simply returning the promise that was returned by `

Optimal method for presenting informative content at the top of a webpage: Harnessing the power of JavaScript

Embrace the presence of null values on the client side

Is there a way to tally up the overall count of digits in a number using TypeScript?

Issue with .html causing .hover to malfunction