Filter the options in ng-options according to various controls or ng-models

Question

Filter the options in ng-options according to various controls or ng-models

Scenario:

In my application, I have a backend built on Laravel 5 and a frontend using AngularJS. The purpose of this application is to allow users to select multiple high-value products that are dependent on each other.

A. Initially, the user selects a product from a drop-down menu and adds it to their cart.

B. After adding the first product, the user can click on an "Add" button to dynamically add more products. This action creates a new row with a drop-down menu for selecting additional products. The dynamic addition of rows is achieved through AngularJS by utilizing $compile/$scope functionality to incorporate compiled HTML elements.

C. When a new row is added, the drop-down menu initially shows no pre-selected values for product selection.

D. In order to add a new product to the cart, the user must select it from the drop-down menu.

E. Users are able to continue adding up to 50 products in total.

Refer to the following UI design for visualization:

The specific requirement is that when a new row is added, the corresponding drop-down menu should exclude any products that have already been selected in the drop-down menus above.

If anyone could provide assistance with this matter, it would be greatly appreciated!

Thank you!

angularjs angularjs-scope angular-filters

Answer 1

Answer №1

Give this a try, hopefully it will be useful.
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$filter) {
  $scope.rep = [];
  $scope.xyz = function(){
    var selectedProducts = $filter('filter')($scope.rep, $scope.sel) ;
    if(selectedProducts.length <= 0){
       $scope.rep.push($scope.sel)
       return false;
    }

  };
  $scope.coll =[
   {id: 1,
   rate : 50,
   base_price : 50,
     product_name : 'ab'
   },
   {id: 2,
   rate : 50,
   base_price : 505,
    product_name : 'abc' 
   },
   {id: 3,
   rate : 520,
   base_price : 500,
     product_name : 'abcd'
   },
   {id: 4,
   rate : 50,
   base_price : 505,
    product_name : 'abcef' 
   },
  ];
});

Here is the HTML code:

 <body ng-controller="MainCtrl">
    <select name="sel" id="sel" ng-model="sel"
    ng-options="x as x.product_name for x in coll track by x.id" ng-change="xyz()">
      <option value="">select product</option>
    </select>
    <table border="0">
      <thead>
        <tr>
          <td>name</td>
          <td>price</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in rep">
          <td>{{x.product_name}}</td>
          <td>{{x.base_price}}</td>
        </tr>
      </tbody>
    </table>
  </body>

For further reference, you can view it here.

Answer 2

Give this a try, hopefully it will be useful.
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$filter) {
  $scope.rep = [];
  $scope.xyz = function(){
    var selectedProducts = $filter('filter')($scope.rep, $scope.sel) ;
    if(selectedProducts.length <= 0){
       $scope.rep.push($scope.sel)
       return false;
    }

  };
  $scope.coll =[
   {id: 1,
   rate : 50,
   base_price : 50,
     product_name : 'ab'
   },
   {id: 2,
   rate : 50,
   base_price : 505,
    product_name : 'abc' 
   },
   {id: 3,
   rate : 520,
   base_price : 500,
     product_name : 'abcd'
   },
   {id: 4,
   rate : 50,
   base_price : 505,
    product_name : 'abcef' 
   },
  ];
});

Here is the HTML code:

 <body ng-controller="MainCtrl">
    <select name="sel" id="sel" ng-model="sel"
    ng-options="x as x.product_name for x in coll track by x.id" ng-change="xyz()">
      <option value="">select product</option>
    </select>
    <table border="0">
      <thead>
        <tr>
          <td>name</td>
          <td>price</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in rep">
          <td>{{x.product_name}}</td>
          <td>{{x.base_price}}</td>
        </tr>
      </tbody>
    </table>
  </body>

For further reference, you can view it here.

Filter the options in ng-options according to various controls or ng-models

Answer №1

Similar questions

Adding a default option to my AngularJS select box

Unlocking protection: Confirming password strength and security with password indicator and regular expressions for special characters in angular through directive

Guide on dynamically accessing child records of a Firebase array in Angularfire

How to effectively utilize TypeScript in a team environment using both Atom and VSCode?

What is the best way to combine a hyperlink with a string in an Angular form?

Is it necessary for me to generate a directive in order to leverage $asyncValidators?

Is there a method available to incorporate a scroller into an nvd3 chart?

The $q.all() function in angular seems to struggle with resolving properly

Having trouble inserting a new row into the AngularJS table?

JavaScript code to use Angular expressions in an HTML document

UI-Router fails to navigate when a parameter is included

What is the best way to programmatically activate a selectbox click within a function's scope?

Connect ngOptions to an array beyond the current scope

Adding a character to an AngularJS textbox

What is the best way to change a variable in an AngularJS view?

Error: The 'controller' argument is not recognized as a function after adding ngCookies

Steps for clearing input field with type=date in Protractor:

Tips on safeguarding your templates while working with SailsJS and AngularJS

Combining ng-repeat and ng-model in a controller

Utilize the ng.IFilterService interface within a TypeScript project