单击 Angular 中的父元素更新单选按钮 Select

Question

假设这个模型：

      <li ng-repeat="item in documentViews" for ={{item}}>
        <div class="col-sm-12 document-view-item" ng-click="change($index)">
          <div class="row">
            <img class="document-view-img" src="../assets/images/kml_document.png">
          </div>

          <div class="row">
              <input type="radio" ng-model="prefs.documentView" ng-value="item.value" id="{{item.value}}" name="documentView" ng-selected="prefs.documentView">
              {{item.key}}
                </input>
          </div>
        </div>
      </li>

还有这个控制器：

angular.module('app')
  .controller('DocumentViewCtrl', function ($scope) {

    $scope.subtitle = 'Default document view';
    $scope.documentViews = [
      {
        key: 'Blah1',
        value: 'b1'
      },
      {
        key: 'Blah2',
        value: 'b2'
      },
    ];

    $scope.change = function($index) {
      console.log($scope.documentViews[$index].value);
    };
});

我不想仅在 select 输入标签时更新单选按钮，而是在单击出现 ng-click 的较高 div 元素时更新单选按钮。我只能在单击发生时触发控制台日志，这很好，但我想知道如何更新单选按钮上的 select，从而更新 $scope。

Answer 1

这样的事情怎么样？

在你的html中：

  <li ng-repeat="item in documentViews" for="{{item}}">
    <div class="col-sm-12 document-view-item" ng-click="change(item)">
      <div class="row">
        <img class="document-view-img" src="../assets/images/kml_document.png">
      </div>

      <div class="row">
          <input type="radio" ng-model="prefs.documentView" ng-value="item.value" id="{{item.value}}" name="documentView" ng-selected="prefs.documentView">
          {{item.key}}
            </input>
      </div>
    </div>
  </li>

在您的控制器中：

$scope.change = function(item) {
  $scope.prefs.documentView = item.value;
}

单击 Angular 中的父元素更新单选按钮 Select

Updating Radio Button Select on Click Parent Element in Angular

angularjs

angular-ui