如何根据用户从下拉列表中的选择访问数组元素的其他字段，以及如何使用 javascript 删除重复项

Question

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();
}]);

Answer 1

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);
  };
}]);