Я хочу выбрать <input>при нажатии в любом месте на div, который содержит его

Question

Это мой HTML:

<div ng-repeat="product in productsCurrency" 
     value="{{product}}" 
     style="margin-bottom: 0px;">

   <div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" 
        class="row" 
        ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 
                   'beacon_padding_bottom': $root.isUsingDevice}">
      <input checked 
             id="{{product.id}}" 
             type="radio" 
             name="shipping_method" 
             value="{{product.id}}" 
             ng-model="$root.shippingMethod" 
             style="align-self: center;">
      <label for="{{product.id}}" 
             ng-class="{'beacon_margin_left': $root.isUsingDevice === false}" 
             style="margin-top: 28px; margin-left: 5px;">
      </label>
      <span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
         <p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
           {{ product.name}}
         </p>
         <p class="beacon_text beacon_shipping_subtitle">
           {{ product.description}}
         </p>
      </span>
      <span class="beacon_text beacon_sum beacon_shipping_sum" 
            ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''), 
                       'beacon_sum_mobile': $root.isUsingDevice}">
        {{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
      </span>
   </div>
   <div style="width: 100%; height: 1px; background: #979797;" 
        ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
   </div>
</div>

Я использую AngularJS, он просматривает список продуктов и создает для них div (view).
Теперь я хочу, чтобы <input>, который я включил в div, был выбран, когда пользователь нажимал на представление. Как мне этого добиться?

Answer 1

Это на самом деле просто достичь. Вы можете использовать label для каждой строки продукта и помещать содержимое в нее, как показано ниже.

Похоже, вы пытаетесь многое изменить, чтобы создать строку продукта со встроенными стилями CSS. Я предлагаю вам использовать свойства flexbox CSS для достижения предсказуемого макета без большого количества свойств, связанных с шириной, высотой и полями, только если вам нужна дополнительная помощь в этом.

angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
  console.log('ExampleController');
  $scope.productsCurrency = [
    {
      id: 1,
      name: 'Product 1'
    },
    {
      id: 2,
      name: 'Product 2'
    },
    {
      id: 3,
      name: 'Product 3'
    }
  ]
});

.layout,
.layout-row,
.layout-column {
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-column {
    flex-direction: column;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="ExampleApp" ng-controller="ExampleController">
  
<div ng-repeat="product in productsCurrency" 
       value="{{product}}" 
       style="margin-bottom: 0px;">

     <label for="{{product.id}}" style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" 
          class="row" 
          ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 
                     'beacon_padding_bottom': $root.isUsingDevice}">
        <input checked 
               id="{{product.id}}" 
               type="radio" 
               name="shipping_method" 
               value="{{product.id}}" 
               ng-model="$root.shippingMethod" 
               style="align-self: center;">
        <div for="{{product.id}}" 
               ng-class="{'beacon_margin_left': $root.isUsingDevice === false}" 
               style="margin-top: 28px; margin-left: 5px;">
        </div>
        <span style="margin-left: 10px; width: calc(100% - 120px);margin-bottom: 20px;">
           <p class="beacon_text beacon_text_title beacon_shipping_title" style="font-weight: 400 !important;">
             {{ product.name}}
           </p>
           <p class="beacon_text beacon_shipping_subtitle">
             {{ product.description}}
           </p>
        </span>
        <span class="beacon_text beacon_sum beacon_shipping_sum" 
              ng-class="{'beacon_shipping_sum_selected': $root.shippingMethod == (product.id + ''), 
                         'beacon_sum_mobile': $root.isUsingDevice}">
          {{unit.currencySymbol(product.currency) + roundPrice(product.price,1)}}
        </span>
     </label>
     <div style="width: 100%; height: 1px; background: #979797;" 
          ng-class="{'beacon_remove_margin_divider': $root.isUsingDevice === false}">
     </div>
     
  </div>
  
</div>

Answer 2

Я использовал нг-щелчок по элементу div следующим образом:

HTML:

 <div style="display: inline-flex; width: calc(100% - 10px);margin-bottom: 0px;height: 90px; padding-left: 10px !important;" class="row" ng-class="{'beacon_shipping_selected': $root.shippingMethod == (product.id + ''), 'beacon_padding_bottom': $root.isUsingDevice}" ng-click="selectInput(product.id)">

JS:

   $scope.selectInput = function(input) {
    $rootScope.shippingMethod = input;
   };

Мой ввод отслеживает $ rootScope.shippingMethod, поэтому он будет меняться соответственно