Javascript 重构AngularJS以使用controllerAs，在所需输入不为空时应用CSS

使用AngularJS 1.5.6有效后，有条件地更改所需输入的背景色的最有效方法是什么？根据我的理解和我所拥有的，我应该避免使用$scope，而是使用controllera。如何重构以下AngularJS代码以使用controllerAs

只有CSS和HTML HTML

使用$scope HTML

安格拉斯

angular.module('myApp', []).
controller('testController', function ($scope)
{
    $scope.text = '';
    $scope.cssClass = 'input-red';    
    $scope.changeCssInput = function () {
        $scope.cssClass = $scope.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});

angular.module('myApp', []).
controller('testController', function ()
{
    var ctrl = this;
    ctrl.wizard = {
        text : '',
        cssClass : 'input-red',
        changeCssInput : changeCssInput,
    };   

    return ctrl.wizard;

    function changeCssInput() {
        ctrl.wizard.cssClass = ctrl.wizard.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});

angular.module（'myApp'，[]）。
控制器（'testController'，函数（$scope）
{
$scope.text=''；
$scope.cssClass='input red'；
$scope.changeCssInput=函数（）{
$scope.cssClass=$scope.text.length
有条件地改变价格的最有效方式是什么
使用AngularJS有效后所需输入的背景色
1.5.6

（下面的代码是使用
controllerAs
语法编写的，有关
controllerAs
语法的更多信息，请参见下文）



如何重构以下AngularJS代码以使用controllerAs

使用controllerAs语法

HTML



安格拉斯

angular.module('myApp', []).
controller('testController', function ($scope)
{
    $scope.text = '';
    $scope.cssClass = 'input-red';    
    $scope.changeCssInput = function () {
        $scope.cssClass = $scope.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});

angular.module('myApp', []).
controller('testController', function ()
{
    var ctrl = this;
    ctrl.wizard = {
        text : '',
        cssClass : 'input-red',
        changeCssInput : changeCssInput,
    };   

    return ctrl.wizard;

    function changeCssInput() {
        ctrl.wizard.cssClass = ctrl.wizard.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});

angular.module（'myApp'，[]）。
控制器（'testController'，函数（）
{
var ctrl=this；
ctrl.wizard={
文本：“”，
cssClass:“输入红色”，
changeCssInput:changeCssInput，
};   
返回ctrl.wizard；
函数更改CSSINPUT（）{
ctrl.wizard.cssClass=ctrl.wizard.text.length
angular.module('myApp', []).
controller('testController', function ($scope)
{
    $scope.text = '';
    $scope.cssClass = 'input-red';    
    $scope.changeCssInput = function () {
        $scope.cssClass = $scope.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});

<input type="text" ng-class="ctrl.text.length <= 0 ? 'input-red' : 'input-green'" ng-model="ctrl.text"/>

<div ng-app="myApp" ng-controller="testController as ctrl">
    <input type="text" ng-class="ctrl.cssClass" ng-change="ctrl.changeCssInput()" ng-model="ctrl.text"/>
</div>

angular.module('myApp', []).
controller('testController', function ()
{
    var ctrl = this;
    ctrl.wizard = {
        text : '',
        cssClass : 'input-red',
        changeCssInput : changeCssInput,
    };   

    return ctrl.wizard;

    function changeCssInput() {
        ctrl.wizard.cssClass = ctrl.wizard.text.length <= 0 ? 'input-red' : 'input-green';  
    }
});