Question

假设它们是外部json文件：

{"threat": [{"level": "Low"},{"level": "Medium"},{"level": "high"}]}

以下是HTML代码：

<body ng-app="myApp">
   <h1>Page Title</h1>
   <img src="images/status.jpg">
   <p>change color</p>
</body>

我如何更改图片和标签颜色？取决于json响应（威胁级别）。

高：红色
低：绿色
介质：橙

我是Angular js的新手，尝试了一些方法，如ng-style和ng-if来改变样式。但是努力工作。

我正在尝试做这样的事情：

function MyController($scope, $http) {
    // Simple GET request example:
    $http({
      method: 'GET',
      url: 'data/color.json'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        console.log(response);
          return response;
      }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        console.log(response);
          return response;
      });
}

但是我在控制台中未定义而不是响应。

获得回复后，我必须检查如何更改图像和文字颜色？取决于响应高，低和中等。

Answer 1

你可以通过多种方式做到这一点。

使用ng-style：

<p ng-style="variableWithStyle">change color</p>
//variableWithStyle={color:'orange'}
//or
<p ng-style="{color:variableWithStyle}">change color</p>
//variableWithStyle='orange'

使用ng-class

<p ng-class="variableWithClass">change color</p>
//variableWithClass='medium', medium is defined in .css

Answer 2

你可以使用 init =＆＃34;＆＃34; 方法

<body ng-app="myApp"  ng-init="High = 'red'; Low = 'green'; Medium = 'orange'">
   <h1>Page Title</h1>
   <img src="images/status.jpg">
   <p  style="color:{{threat.level}};">change color</p>
</body>

注意：检查变量名称区分大小写。

Answer 3

你必须为font-color

制作3个css类

clBuildProgram()

现在你可以用两种不同的方式做到这一点，

选项1）

在js do：

.red {
  color: 'red';
}
.green {
  color: 'green';
}
.orange {
  color: 'orange';
}

HTML中的

$scope.selectedItem = ({Low:{
    url: '1images/status.jpg',
    class: 'green'
  },
  Medium:{
    url: '2images/status.jpg',
    class: 'orange'
  },
  High:{
    url: '3images/status.jpg',
    class: 'red'
  }
})[selectedResponse.level];

选项2）

在html中使用ng-class和ng-if：

<body ng-app="myApp">
   <h1>Page Title</h1>
   <img src="{{selectedItem.url}}">
   <p class="{{selectedItem.class}}">change color</p>
</body>

Angular js：根据json响应

3 个答案: