Question

如果点击和关闭点击图像来自服务器，如何在点击和关闭点击角度时在复选框上更改图像。这是我的javascript代码，我正在向服务器发出请求。

var url = "http://"+window.localStorage.getItem("ip")+"/api/v1/pins/details/"+userID; 
console.log(url);
$http.get(url)
.success(function(data){
  console.log("groups",data);
  $scope.result = data;
});

我的HTML代码是：

<ul class="list">
    <li class="item item" ng-repeat="a in result.result | filter: a.groupName=sortby">
            <!--{{a.alias}}-->
        <label for="a.switchID">    
          <img style="height:32px;width: 32px;position: absolute;left:6px;top:13px;" class="image" src="http://png.findicons.com/files/icons/1588/farm_fresh_web/32/lightbulb_off.png"/> //this image i have taken from example.
        </label>  
          <input id="a.switchID" type="checkbox" ng-change="send(a.deviceID,a.pinNumber)" ng-model="value4 ">
          </div>
    </li>
  </ul>

所以我从服务器获取JSON数据，该服务器具有on和off图像URL。所以如何在点击时更改它。

Answer 1

这样的东西？

查看：

<input type="checkbox" ng-click="changeImage()" > 

<img src="{{imgSource}}"/>

控制器：

$scope.imgSource="img1.jpg";

$scope.changeImage = function() {
  $scope.imgSource = "img2.jpg";
}

Answer 2

对于自定义复选框，大多数实现仍然会保持复选框完整，只是隐藏，并且它将通过使用标签激活。因此，复选框中的ng-model仍可正常工作，数据处理无需更改。

以下演示使用http://codepen.io/CreativeJuiz/pen/BiHzp中的样式你可以使用任何自定义css，只要它们仍然保留复选框。

＆＃13;

angular.module('test', [])

.controller('Test', function($scope){
  $scope.lightbulb = {
    id: 4,
    name: 'light',
    icon: {
      on: 'http://png.findicons.com/files/icons/1588/farm_fresh_web/32/lightbulb.png',
      off: 'http://png.findicons.com/files/icons/1588/farm_fresh_web/32/lightbulb_off.png'
    }
  }
  
  $scope.getIcon = function(data){
    if (data.icon) {
      if (data.isChecked) return data.icon.on;
      else return data.icon.off;
    }
  }
});

＆＃13;

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  user-select: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  <p>
    <input type="checkbox" ng-attr-id="{{'c' + lightbulb.id}}" ng-model="lightbulb.isChecked" />
    <label ng-attr-for="{{'c' +lightbulb.id}}">
      <img ng-src="{{getIcon(lightbulb)}}">
      {{lightbulb.name}}
    </label>
  </p>
  
  <div>{{lightbulb.isChecked}}</div>
</div>

＆＃13;

将图像放在复选框上而不使用css

2 个答案: