Question

我想要的是如果<p>Green.</p>那么它的样式为style="color: green"。如果<p>Red.</p>则其格式为style="color: red"。

我拥有的是

<p
    ng-model="please_take_my_inner_html"
    ng-style="{ color: please_take_my_inner_html == 'Green.' ? 'green' : 'red' }"
>
   Green.
</p>

这不起作用。但我希望你知道我想要达到的目标。

Answer 1

我不了解您的用例，但可以通过自定义指令检查html文本。

但正如评论中提到的，我也不会这样做。而是使用模型为您的数据和您的类/样式，并在您的HTML标记中使用它。

以下演示中的内容应该可以使用，或者使用fiddle。

（正如其他答案[{1}}中所述）无法在此处使用。请参阅docs for ngModel了解可能的元素。）

＆＃13;

ng-model

＆＃13;

angular.module('demoApp', [])
	.controller('mainController', MainController)
	.directive('innerStyle',innerStyle)
  
function innerStyle() {

	return {
  	link: function(scope, element, attrs) {
    //console.log(element.text())
    	var style = element
      	.text().trim().toLowerCase().replace('.', '');
    	element.addClass(style);
    /*
    	// switch also possible
    	switch(element.text().trim()) {
      	case 'Green.':
        	console.log('grenn style');
          element.addClass('green');
         	break;
        case 'Red.':
        	console.log('red style');
          element.addClass('red');
          break;
      }*/
    }
  }
}

function MainController() {
	var vm = this;
  
  vm.data = {
  	firstModel: {
    	text: 'Green.',
      class: 'green'
    },
    secondModel: {
    	text: 'Red.',
      class: 'red'
    }
  };
}

＆＃13;

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

＆＃13;

Answer 2

我们不能将ng-model与p元素或任何其他不接受用户输入的元素一起使用。它只绑定input，select和textarea元素的值。简而言之，它将与表单元素一起使用。

在input元素中，我们可以考虑下面提到的元素。

 - input 
 - text
 - checkbox
 - radio
 - number
 - email
 - url
 - date
 - datetime
 - local
 - time
 - month
 - week

AngularJS如何使用ng-model作为<p> </p>段落标记（取内部值）？

2 个答案: