更改輸入的背景色

Question

我正在使用角度。 我有一個輸入看起來像：

<input class="form-control" type="text" ng-model="newBook.color">

基本上，當此更改時，我希望更改div的背景色。

我的控制器有幾行看起來像：

$scope.newBook = {};
$scope.newBook.color = "";

$scope.color = ->
  return "background-color: " + $scope.newBook.color;

然后我要更改的div：

<div ng-style="{{color()}}"></div>

但是，我得到了錯誤： Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 17 of the expression [background-color:]

Answer 1

我在這里為您提供了一個示例： https : //jsfiddle.net/chelogui/2h3hrj1x/

HTML：

<div ng-app="appTest">
    <div ng-controller="contr as controller">
        <input class="form-control" type="text" ng-model="controller.color" />
        <div id="divTest" style="background-color: {{ controller.color }}"></div> 
    </div> 
</div>

Javascript：

angular.module('appTest', [])
    .controller('contr', [function () {
    var self = this;
    self.color = "red";
}]);

以CSS為例：

#divTest {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin-top: 10px;
}

Answer 2

這是一個工作示例 ：

您需要更改color功能才能執行此操作：

angular.module('myApp',[])
   .controller('myFirst',['$scope',function($scope){
      $scope.newBook = {};
      $scope.newBook.color = "red";
      $scope.color = function(){
        return "{'background-color' : '"+$scope.newBook.color+"'}";
      }
}])

檢查一下：

 angular.module('myApp',[]) .controller('myFirst',['$scope',function($scope){ $scope.newBook = {}; $scope.newBook.color = "red"; $scope.color = function(){ return "{'background-color' : '"+$scope.newBook.color+"'}"; } }]) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="myFirst" ng-style="{{color()}}">Ajay</div></div>