Angular JS知道什么是用复选框图像和单选按钮图像触发的

Angular JS know what is Triggered with a Checkbox Image and Radio Button Image

本文关键字：图像 单选按钮 复选框 JS 什么 Angular      更新时间：2023-09-26

我有这样的

我没有使用输入类型复选框，而是使用图像。如果复选框未选中，李将不会有一个类"选中">

<li ng-model="FirstCheckBox">

<div>Check1</div>

</li>

但如果复选框被选中，李将有一个类"选中">

<li ng-model="FirstCheckBox" class="checked">                                                                                                                                               
<div>Check1</div>                                                                   
</li>

我关心的是，根据李是否有一个类"已检查"，将$scope.FirstCheckBox设置为true或false的正确方法是什么

此外，我不确定ng模型是否应该处于li

如果触发了任何事件，则可以通过传递$event并读取属性来完成。

您可以使用ngClass动态更改css。

试试这个，

在html中，

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
  </head>
  <body ng-controller="mainCtrl">
    <h1>{{greetings}} Plunker!</h1>
    <div ng-class="selectCss">
        <span ng-click="toggle(selectCss)">Click me to change css</span>
    </div>


  </body>
</html>

在app.js文件中，

var app=angular.module('myApp',[]);
app.controller('mainCtrl',['$scope',function(scope){
  scope.greetings='hello';

   scope.selectCss='unchecked';
    scope.toggle=function(selectCss){
        if(selectCss==='checked'){
            scope.selectCss='unchecked';
        }else{
         scope.selectCss='checked';
        }
    }
 }])

在style.css中，

.unchecked{
  background-color:yellow;
}
.checked{
    background-color:green;
}

看看这个笨蛋。

希望这能回答您的问题：(

相关文章：