如何在AngularJS中爲img元素設置邊框樣式

這是AngularJS中的一個初學者問題。如何在AngularJS中爲img元素設置邊框樣式

我正在寫一個簡單的應用程序來顯示一些圖像，並允許用戶切換選擇。任何時候只能選擇一個圖像。

無論如何，如何設置樣式來更改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>

來源

2015-12-13 user1882491

使用納克級https://docs.angularjs.org/api/ng/directive/ngClass –

你做錯了。根本不要使用DOM操作。只要忘記這種可能性，直到你明白爲什麼。而是使用ngClass指令（也不要使用ngStyle）：

<!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>

來源

2015-12-13 15:01:59 dfsq

恍如正確的方法：你能否詳細說明爲什麼使用類比直接設置風格好？ – user1882491

因爲直接在控制器中設置樣式根本不靈活。想想這個：明天你會想改變顏色，添加背景圖片等。使用ngStyle你將不得不改變你的應用程序的控制器。但是，這種變化實際上與CSS相關。爲什麼即使碰到JS代碼？關注點分離。 – dfsq

更換ng-style="myStyle"用：

ng-class="myStyle"

，並定義在CSS類：

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

以上是清潔器的方法，因爲它只是設置必要的類爲<img />元件您可以對其進行設計，以便將演示文稿和樣式分開。您也可以使用$scope並定義一個函數並注入樣式。

來源

2015-12-13 14:59:25

如何在AngularJS中爲img元素設置邊框樣式

回答

相關問題