Angular JS - 使用动态数据进行条件性的内联样式

21 浏览
0 Comments

Angular JS - 使用动态数据进行条件性的内联样式

我想根据动态值条件来显示样式。例如：





是否可以使用ng-class或ng-style来实现？

															

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
AngularJS中，内联样式的条件设置是通过使用ng-style指令实现的。然而，如果在ng-style指令中使用插值（即{{和}}）语法来动态获取数据，则会出现问题。因为大多数内置的AngularJS指令要求使用表达式而不是插值。


为了解决这个问题，可以使用如下重构后的代码：


<div ng-style="{ 'width' : !obj.prop ? 0 : obj.val1 / obj.val2 + '%' }"></div>


在这个重构后的代码中，我们使用了一个表达式来设置内联样式。首先，我们使用条件运算符（?:）来判断是否满足条件。如果不满足条件，则将宽度设置为0；否则，将宽度设置为obj.val1 / obj.val2 + '%'。


通过这种方式，我们避免了在ng-style指令中使用插值语法的问题，从而解决了原始代码中出现的错误。

									

				

									

			

			
0