Question

这是AngularJS中的初学者问题。

我正在编写一个简单的应用程序来显示一些图像，并允许用户切换选择。任何时候都只能选择一张图片。

无论如何，如何设置样式以更改img标记的边框。当用户点击图像时，应设置样式。设置样式或自定义样式myStyle都不起作用（样式未应用）。

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    <script >
        function myCtrl($scope, $window) {
            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
              ];

            $scope.ToggleCourse = function(imageElement) {
                console.log("id = " + imageElement.id);
                imageElement.style = "{border:'2px solid blue'}"; // doesnt work
                imageElement.myStyle = "{border:'2px solid blue'}"; // neither does this///
            }
        }
    </script>
</head>
<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-click="ToggleCourse($event.target)">
                    <label>{{course.Name}}</label>
                    <img id="card{{course.Id}}" src="course.png" ng-style="myStyle">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

你做错了。根本不使用DOM操作。在了解为什么之前，请忘记这种可能性。而是使用ngClass指令（也不要使用ngStyle）：

＆＃13;

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

    <script >
        function myCtrl($scope, $window) {
            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
            ];

            $scope.ToggleCourse = function(course) {
                $scope.selected = course;
            }
        }
    </script>
    <style>
        .selected img {border: 2px solid blue;}
    </style>
</head>
<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-click="ToggleCourse(course)" ng-class="{selected: course === selected}">
                    <label>{{course.Name}}</label>
                    <img id="card{{course.Id}}" src="course.png" ng-style="myStyle">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 2

将ng-style="myStyle"替换为：

ng-class="myStyle"

在CSS中定义类：

.myStyle {border: 2px solid #999;}

以上是更干净的方法，因为它只为<img />元素设置必要的类，您可以设置它的样式，以便分离表示和样式。您还可以使用$scope并定义一个函数并注入样式。

如何在AngularJS中为img元素设置边框样式

2 个答案: