ng-class for select取决于选择的选项

时间:2015-02-27 19:21:36

标签: angularjs

Ng-click对选项不起作用,所以我想知道如何根据选择的选项更改Select类。

  <select ng-class="paymentStatus ? 'Authorized' : 'Capture'">
                    <option>Authorized</option>
                    <option>Capture</option>
                </select>

1 个答案:

答案 0 :(得分:1)

您需要跟踪选择的选项。不要定义您的选项,而是使用ng-options并为<select>分配模型。

<body ng-app="TestApp">
  <div ng-controller="TestController">
    <select ng-model="paymentStatus"
            ng-options="options for options in opts"
            ng-class="paymentStatus == 'Authorized' ? 'authorized' : 'capture'">
    </select>  
  </div>
</body>

你的ng-class什么接近,但你不能只测试它是否设置。如果其==到“授权”,请将课程设置为authorize,否则将其设置为capture

在您的控制器中,您可以设置默认的paymentStatus

var app = angular.module('TestApp',[]);

app.controller('TestController', function($scope)
{
  $scope.opts = ['Authorized','Capture'];
  $scope.paymentStatus = $scope.opts[0];
});

你的css可能是这样的:

.authorized {
  background-color:green
}

.capture {
  background-color:red
}

jsfiddle