If you want to access user selection, then you need to add value
attr on your <option>
tag. After that, you need to add listener like ng-change="onProductSelect()"
near ng-model="UserSelected"
and after that you will be able to track changes on <select>
element.
Example:
<select ng-model="selectedProduct" ng-change="onProductSelect()">
<option value="" selected disabled>--Product--</option>
<option ng-repeat="product in products" value="{{ product.type }}">{{ product.type }}</option>
</select>
app.controller('HomeController', ['$scope', '$window','myService', function ($scope, $window, myService) {
$scope.selectedProduct = '';
$scope.products = myService.getProducts();
$scope.onProductSelect = () => {
$scope.products = $scope.products.filter(product => product.type === $scope.selectedProduct);
};
}]);
Below is the part of code in main html file
<select ng-model="UserSelected">
<option value="" selected disabled>--Product--</option>
<option ng-repeat="Product in proservice">{{Product.type}}</option>
</select>{{UserSelected}}
Below is the AngularJS code with array here there is array of products with type such as robot,mobile,tv etc. I want to fetch array row according to the type selected by the user.
app.service('myService', function () {
this.setProduct = function () {
this.Products = [
{id: 1, images: 'D:/angular/shop/src/home/robot3.jpg', Names: "ASIMO ", Price: "$1000", detail: "hello",type:"robot"},
{id: 2,images: "D:/angular/shop/src/home/robot2.jfif", Names: "Bionic Hand", Price: "$2000", detail: "hi",type:"robot" },
{id: 6, images: "D:/angular/shop/src/home/mobile3.png", Names: "Xiaomi", Price: "$3000", detail: "heyyy",type:"mobile" },
{id: 7, images: 'D:/angular/shop/src/home/mobile4.jpg', Names: "oppo", Price: "$1000", detail: "hello",type:"mobile" },
{id: 8, images: "D:/angular/shop/src/home/laptop1.jpg", Names: "Dell", Price: "$2000", detail: "hi",type:"laptop" },
{id: 10, images: "D:/angular/shop/src/home/laptop2.jpg", Names: "Lenovo", Price: "$3000", detail: "heyyy",type:"laptop" },
{id: 11, images: 'D:/angular/shop/src/home/laptop3.jpg', Names: "IBM", Price: "$1000", detail: "hello",type:"laptop" }]
return this.Products;
};
this.getProduct= function(){
return this.Products;
}
});
app.controller('HomeController', ['$scope', '$window','myService', function ($scope, $window, myService) {
$scope.proservice = myService.setProduct();
}]);
yes, thanks brother it helped just did some changes in the code it worked out.