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（视图）。
现在，我希望在用户按下视图时选择包含在div中的<input>。我该如何实现？

Answer 1

这实际上很容易实现。您可以为每个产品行使用label，并将内容放入其中，如下所示。

您似乎正在尝试进行很多调整以创建具有内联CSS样式的产品行。我建议您仅在需要进一步帮助的情况下，才使用CSS flexbox属性来实现可预测的布局，而无需做很多与宽度，高度，边距相关的属性。

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上使用了ng-click：

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，因此它将相应更改

在包含它的div上按任意位置时，我想选择我的<input />

2 个答案: