góc js ng phong cách không làm việc

Question

<span>Select color : </span> 

<select ng-model="myStyle"> 
    <option value="">none</option> 
    <option value="{color:red}">Red</option> 
    <option value="{color:'green'}">Green</option> 
</select> 

<div ng-style="myStyle"> 

http://plnkr.co/edit/IOHjEGbuOzD4CjwRqIK9?p=preview

Trong plunker này, ví dụ 1 công trình hoàn toàn tốt đẹp nhưng trong ví dụ 2 chọn màu không hoạt động.

Cảm ơn trước

Answer 1

Đây thực sự là một sửa chữa đơn giản, có myStyle được nhiều hơn một loại myColor kê khai trên ng-style có {{'color':myColor}} biểu hiện của bạn:

<select ng-model="myColor"> 
    <option value="">none</option> 
    <option value="red">Red</option> 
    <option value="green">Green</option> 
</select> 

<div ng-style="{'color':myColor}"> 
    <p>Text to change color</p> 
</div> 

Không cần cho một ng-change hoạt động trong phiên bản THIS này.

Working Example

---

Chỉnh sửa, giải thích:

giá trị trong chọn lựa chọn không phải là một chỉ thị góc để myStyle đang được thiết lập để theo nghĩa đen "{color: 'đỏ'}" không Javascript Object{"color":"red"} mà Angular đang tìm kiếm và có thể phân tích cú pháp trong ng-style.

Vì giá trị chữ của "{color: 'red'}" trông giống như đối tượng thì bạn sẽ không nhận thấy sự khác biệt trong batarang. Nhưng nếu bạn chạy một console.log() bạn sẽ thấy sự khác biệt.

Đặt ví dụ của bạn một, sau đó thiết lập ví dụ 2 màu đỏ và thay đổi chức năng clearFilter của bạn bằng cách thêm hai bản ghi và nhìn vào sản lượng và bạn sẽ thấy những gì tôi có nghĩa là:

$scope.clearFilter = function() { 
    console.log('myStyle1', $scope.myStyle1); 
    console.log('myStyle', $scope.myStyle); 
    $scope.query = ''; 
    $scope.orderProp = ''; 
    $scope.myColor = ''; 
};