Question

我想通过点击<div>来更改单选按钮的属性。在下面的代码中，div有一个类，如果单击div，我必须将单选按钮的属性更改为true。我使用jQuery编写了这个事件处理。

你能告诉我如何使用Angularjs解决这个问题吗？

＆＃13;

   var app = angular.module('myapp', []);

 app.controller('MainCtrl', function($scope) {
//How to write code here in Angular//
 });

＆＃13;

<!DOCTYPE html>
<html ng-app='myapp'>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
    <input ng-click="Large()" id="large" type="radio" name="button">Large
    <input ng-click="Medium()" id="medium" type="radio" name="button">medium
    <input ng-click="Small()" id="small" type="radio" name="button">Small
</div>
<div>
<div class="col-xs-12 field">first //click</div><br/>
<div class="col-xs-6 field">second //click</div><br/>
<div class="col-xs-4 field">third //click</div>
</div>
<script>
$(document).ready(function () {
 $('.field').bind('click', function () {
        if ($(this).hasClass('col-xs-12')) {
            $('#large').prop("checked", true);;
        }
        else if ($(this).hasClass('col-xs-6')) {
            $('#medium').prop("checked", true);
        }
        else
            $('#small').prop("checked", true);
        
    })

});
</script>
    </body>
  </html>

＆＃13;

（也可在https://plnkr.co/edit/PNabPp2OvYAS76p3KfsH?p=preview获得）

Answer 1

由于您无法使用label，因此角度解决方案是使用model值

var app = angular.module('myapp', [], function() {})

app.controller('MainCtrl', function($scope) {
  $scope.fieldClicked = function(size) {
    if (size == 'col-xs-12') {
      $scope.size = 'large';
    } else if (size == 'col-xs-6') {
      $scope.size = 'medium';
    } else if (size == 'col-xs-4') {
      $scope.size = 'small';
    }
  }
})

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="MainCtrl">
    <div>
      <input ng-model="size" value="large" type="radio" name="button">Large
      <input ng-model="size" value="medium" type="radio" name="button">medium
      <input ng-model="size" value="small" type="radio" name="button">Small
    </div>
    <div>
      <!--ng-click="fieldClicked(div.size)" in template-->
      <div class="col-xs-12 field" ng-click="fieldClicked('col-xs-12')">first</div>
      <br/>
      <div class="col-xs-6 field" ng-click="fieldClicked('col-xs-6')">second</div>
      <br/>
      <div class="col-xs-4 field" ng-click="fieldClicked('col-xs-4')">third</div>
    </div>
  </div>
</div>

Answer 2

使用model指令
更新ng-click值

试试这个：

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.val = ''
  $scope.clickHadler = function(val) {
    $scope.val = val;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app='myapp' ng-controller="MainCtrl">
  <div>
    <input ng-click="Large()" ng-model='val' value='first' id="large" type="radio" name="button">Large
    <input ng-click="Medium()" ng-model='val' value='second' id="medium" type="radio" name="button">medium
    <input ng-click="Small()" ng-model='val' value='third' id="small" type="radio" name="button">Small
  </div>
  <div>
    <div class="col-xs-12" ng-click='clickHadler("first")'>first //click</div>
    <br/>
    <div class="col-xs-6" ng-click='clickHadler("second")'>second //click</div>
    <br/>
    <div class="col-xs-4" ng-click='clickHadler("third")'>third //click</div>
  </div>

</body>

Answer 3

此处不需要脚本，只需使用ShellCommand代替haltOnFailure

label

div

单击angularjs更改属性

3 个答案: