Tạo biến cho ng-class động bằng cách sử dụng Expression trong AngularJs

Đây là đoạn mã từ mã HTML của tôi.Tạo biến cho ng-class động bằng cách sử dụng Expression trong AngularJs

<div ng-repeat="boxName in boxNameList"> 
    <div ng-class="myBoxes.{{boxName}}">{{boxName}}</div> 
</div>

Những gì tôi đang cố gắng để làm: Tôi đã tạo ra 3 phần tử div mà sẽ ở phía trên cùng của màn hình bằng cách sử dụng đoạn viết ở trên. Mỗi phần tử div sẽ được đưa ra một hình dạng của một hộp bằng cách sử dụng css. Một hộp (div) có thể có màu đỏ làm nền hoặc màu đen làm nền của nó.

CSS cho hai màu sắc là:

.redBackground{ 
    background-color: red; 
} 

.blackBackground{ 
    background-color: black; 
}

Dưới đây là một đoạn trích từ bộ điều khiển của tôi:

$scope.boxNameList=['Box1','Box2','Box3']; 
$scope.myBoxes={ 
     Box1: "redBackground", 
     Box2: "blackBackground", 
     Box3: "blackBackground" 
}

Trong ví dụ này tôi đã thực hiện $scope.myBoxes như một Json tĩnh nhưng khi chạy tôi có kế hoạch tạo mã Json để tôi có thể tự động gán màu nền cho các hộp của mình.

Vấn đề mà tôi đang gặp phải: Vấn đề là tôi không thể thấy các hộp có màu sắc. Tên biến ng-class trong trường hợp này như bạn có thể thấy cũng được tạo động. Nếu tôi không sử dụng ng-repeat và không tự động tạo ra tên biến ng-class thì nó hoạt động tốt. Ví dụ: cho đoạn mã được đưa ra dưới đây khi tôi tự động thay đổi giá trị của biến số myBoxes.Box1myBoxes.Box2 và myBoxes.Box3 thì nó hoạt động hoàn hảo.

<div ng-class="myBoxes.Box1">Box1</div> 
<div ng-class="myBoxes.Box2">Box2</div> 
<div ng-class="myBoxes.Box3">Box3</div>

Tuy nhiên nếu tôi tạo biến ng-class động "myBoxes.{{boxName}}" thì nó không hoạt động như biến. Tôi chắc chắn sẽ có một cách tốt hơn để đạt được những gì tôi đang cố gắng để làm tuy nhiên tôi đã không thể tìm thấy rằng sau giờ và giờ googling/thử và lỗi. Sẽ rất vui nếu ai đó có thể giúp tôi.

Nguồn

2013-02-22 Durin

Bạn sắp hoàn tất, đó là myBoxes[boxName] và không phải myBoxes.{{boxName}}.

Something như thế này:

<!doctype html> 
<html ng-app="myApp"> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.angularjs.org/1.1.2/angular.min.js"></script> 
    <script type="text/javascript"> 
    var myApp = angular.module('myApp', []); 

    myApp.controller('MainCtrl', ['$scope', function($scope){ 
     $scope.boxNameList=['Box1','Box2','Box3']; 
     $scope.myBoxes={ 
       Box1: "redBackground", 
       Box2: "blackBackground", 
       Box3: "blackBackground" 
     } 
    }]); 
    </script> 
    <style type="text/css"> 
    .redBackground{ 
     background-color: red; 
    } 

    .blackBackground{ 
     background-color: black; 
    } 
    </style> 
</head> 
<body ng-controller="MainCtrl"> 
    <div ng-repeat="name in boxNameList"> 
     <div ng-class="myBoxes[name]">Box1</div> 
    </div> 
</body> 
</html>

Nguồn

2013-02-22 09:05:44

Awesome! hoạt động như một sự quyến rũ. Nhưng tôi vẫn tự hỏi tại sao nó làm việc bằng cách truy cập các giá trị đối tượng Json sử dụng ký hiệu mảng thay vì cách bình thường để truy cập các đối tượng Json bằng cách sử dụng ký pháp chấm. Tôi là một newbie javscript, tôi xin lỗi nếu tôi hỏi một câu hỏi rất cơ bản. – Durin

Trước hết, 'myBoxes. {{BoxName}}' không phải là một biểu thức hợp lệ trong Angular, nhưng 'myBoxes.boxName' và' myBoxes [boxName] 'là. Trong Javascript, các biểu thức này giống nhau: 'myBoxes.boxName',' myBoxes ['boxName'] 'và' var name = 'boxName'; myBoxes [name]; 'có nghĩa là khi bạn muốn một thuộc tính trên một đối tượng nhưng bạn không biết tên thuộc tính là gì, bạn có thể sử dụng ký hiệu mảng với một biến thay thế. –

Chỉnh sửa: oh! sau đó trong trường hợp đó '{{'myBoxes.' + name}} 'cũng nên làm việc cho tôi vì nó là một biểu thức js góc hợp lệ. Nhưng nó không hiệu quả với tôi. Cảm ơn bạn đã giải thích. – Durin

Tạo biến cho ng-class động bằng cách sử dụng Expression trong AngularJs

Trả lời

Các vấn đề liên quan