Как получить доступ к другим полям элементов массива на основе выбора пользователя из выпадающего списка, а также как удалить дубликаты, используя javascript

Question

Ниже приведена часть кода в основном html файле

<select ng-model="UserSelected">
  <option value="" selected disabled>--Product--</option>
  <option ng-repeat="Product in proservice">{{Product.type}}</option>
</select>{{UserSelected}}

Ниже приведен код AngularJS с массивом, здесь находится массив продуктов такого типа, как robot, mobile, телевизор et c. Я хочу получить строку массива в соответствии с типом, выбранным пользователем.

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

Если вы хотите получить доступ к выбору пользователя, вам нужно добавить value attr к вашему тегу <option>. После этого вам нужно добавить слушателя, например ng-change="onProductSelect()" рядом с ng-model="UserSelected", и после этого вы сможете отслеживать изменения на элементе <select>.

Пример:

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