Обновление Radio Button Выберите на Нажмите Родительский элемент в угловых

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

Я не хочу, чтобы обновить только радиокнопку при выборе входной метки , но при нажатии на верхний элемент div, где появляется ng-click. Я не мог получить больше, чем запускать консольный журнал, когда происходит щелчок, и это нормально, но мне интересно, как обновить выбор на переключателе и, следовательно, на $ 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; 
}