Angularjs 我想选择我的<；输入>；当按下包含它的div上的任意位置时

这是我的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>

{{product.name}


{{product.description}}

{{unit.currencySymbol（product.currency）+roundPrice（product.price，1）}

我使用的是AngularJS，它浏览了一个产品列表，并为所有产品创建了一个div（视图）。

---

现在，当用户按下视图时，我希望选择已包含在div中的

。我怎样才能做到这一点呢？

我在div上使用了ng键，如下所示：

HTML:

---

我的输入监视$rootScope.shippingMethod，因此它将相应地更改

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

似乎您正在尝试进行大量调整，以创建具有内联CSS样式的产品行。我建议您使用CSS flexbox属性来实现可预测的布局，而无需执行大量与宽度、高度、边距相关的属性，前提是您需要进一步的帮助

角度模块（'ExampleApp'，[]） .controller（'ExampleController'，函数（$scope）{ log（'ExampleController'）； $scope.productsCurrency=[ { id:1， 名称：“产品1” }, { id:2， 名称：“产品2” }, { id:3， 名称：“产品3” } ] });

.layout，
.布局行，
.版面栏{
显示器：flex；
}
.布局行{
弯曲方向：行；
}
.版面栏{
弯曲方向：立柱；
}

{{product.name}


{{product.description}}

{{unit.currencySymbol（product.currency）+roundPrice（product.price，1）}

——这似乎是一个简化的html问题，对吗？很明显，你应该创建指令——你尝试过什么？Android开发者的核心，这只是一个跳跃，所以我还不知道那是什么，我会检查angular js指令，然后回来

 <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)">

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