Question

我有一个绑定列表，我正在寻找一种方法来“转换”它绑定的变量，即在下面的例子中我想将backgroundColor绑定到int变量但是使用了一些我可以更改颜色的功能使用一些预定义的逻辑（红色表示状态= 0，蓝色表示状态= 1，黑色表示状态= 2）。

http://jsfiddle.net/UWqWf/16/

我可以通过点击事件中的dom manupulation来做到这一点，但我必须编写“脏”代码来更改颜色并确保更新$ scope.items [x]

可以这样做吗？

<ul ng-app ng-controller="MyCtrl">
    <li ng-repeat="i in items" ng-click="toggle()"> <span style="background-color: {{i.state}}"> {{i.name}} </span> </li>
</ul>



function MyCtrl($scope) {
    $scope.items = [{"name":"a","state":"1"},{"name":"b","state":"2"}, {"name":"c","state":"0"}];
    $scope.toggle = function(){
        // toggle the state i.e.
        // if state<3 then state++
        // else state=0 
     };
};

Answer 1

我喜欢将我的风格保留在javascript

之外

<style>
.state-0{ background-color: red;}
.state-1{ background-color: blue;}
.state-2{ background-color: black;}
</style>

<ul ng-app ng-controller="MyCtrl">
  <li ng-repeat="i in items" ng-click="toggle()"> 
    <span class="state-{{i.state}}">
      {{i.name}}
    </span>
  </li>
</ul>

Answer 2

你可能会尝试这样的事情吗？您不需要自己执行DOM操作。您可以在toggle方法本身中传递该迭代的项目。

<ul ng-controller="MyCtrl">
    <li ng-repeat="i in items" ng-click="toggle(i)"> 
        <span style="background-color: {{getColor(i.state)}}"> {{i.name}} </span> 
    </li>
</ul>

和

function MyCtrl($scope) {
    $scope.items = [{"name":"Item1","state":1},{"name":"Item2","state":2}, {"name":"Item3","state":0}];
    $scope.color = ["red", "green", "blue"];
    $scope.getColor = function(state){
        return $scope.color[state];
    }

    $scope.toggle = function(item){
          if (item.state<3 )
             item.state++;
         else 
             item.state=0 ;
     };
};

<强> Demo

或者只是简单地摆脱方法getColor

 <span style="background-color: {{color[i.state]}}"> {{i.name}} </span>

<强> Demo

AngularJS：转换绑定值

2 个答案: