在单击角度时更改属性

Change Property on click angularjs

本文关键字：属性 单击      更新时间：2023-09-26

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

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

   var app = angular.module('myapp', []);
 app.controller('MainCtrl', function($scope) {
//How to write code here in Angular//
 });
<!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>

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

使用 ng-click 指令更新model值

试试这个：

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>

由于你不能使用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>

这里不需要脚本，只需使用label而不是div 

var app = angular.module('myapp', [], function() {})
app.controller('MainCtrl', function($scope) {
})
<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-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>
      <label for="large" class="col-xs-12 field">first</label>
      <br/>
      <label for="medium" class="col-xs-6 field">second</label>
      <br/>
      <label for="small" class="col-xs-4 field">third</label>
    </div>
  </div>
</div>

相关文章：