AngularJS，输入值更改时按钮背景颜色更改

Question

现在，该页面正在创建帐户。

我想在输入没有值的情况下将按钮背景色设置为灰色； 当所有输入均具有值时，按钮背景色为蓝色。

我的代码是这样的：

 <style>
    .create-student-account-box {
        padding:23px;
        width: 752px;
        height: 489px;
        font-family:  'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif;
        color: #303030;
    }
    .create-student-account-box .create-student-content-box {
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 10px;
    }
    .create-student-account-box .top-box {
        margin: 0 auto;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }
    .create-student-account-box .content-box {
        margin-top: 30px;
    }
    .create-student-account-box .content-box  .line-box {
        height: 44px;
        margin-bottom: 26px;
        font-size: 14px;
        line-height: 44px;
    }

    .create-student-account-box .line-box .left-title {
        margin-right: 30px;
        display: inline-block;
    }
    .create-student-account-box .line-box .right-content {
        display: inline-block;
    }
    .create-student-account-box .line-box .right-content input {
        height: 44px;
        border: 1px solid lightgrey;
        border-radius: 2px;
    }

    .create-student-account-box .foot-box {
        text-align: center;
        margin-top: 69px;
    }

    .create-button-style {
        width: 140px;
        line-height: 36px;
        color: white;
        background-color: #00c0ff;
        text-align: center;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }

    .grey-button-style {
        background-color: lightgrey !important;
    }

</style>





<div  class="create-student-account-box">
    <div class="create-student-content-box">
        <div class="top-box">
            <div class="top-title">CreateAccount</div>
        </div>
        <div class="content-box">
            <div class="line-box">
                <div class="left-title">
                    <span>Name</span>
                </div>
                <div class="right-content">
                    <input style="width: 500px"   ng-model="create_obj.student_name">
                </div>
            </div>
            <div class="line-box">
                <div class="left-title">
                    <span>Sex</span>
                </div>
                <div class="right-content">
                    <input type="radio" name="sex" value="male" ng-model="create_obj.sex" />Male
                    <input type="radio" name="sex" value="female" ng-model="create_obj.sex" />Female
                </div>
            </div>
            <div class="line-box">
                <div class="left-title">
                    <span>LoginAccount</span>
                </div>
                <div class="right-content">
                    <input style="width: 500px"   ng-model="create_obj.login_account">
                </div>
            </div>
            <div class="line-box">
                <div class="left-title">
                    <span>LoginPassword</span>
                </div>
                <div class="right-content">
                    <input style="width: 500px"   ng-model="create_obj.login_password" >
                </div>
            </div>
        </div>
        <div  class="foot-box">
            <button ng-class="{ false:'grey-button-style'}[is_show_hightlight]"  ng-click="createAccountFun()" class="create-button-style" >Create</button>
        </div>
    </div>
</div>


<script src="angular.js"></script>
<script>
    var app = angular.module('app',[]);
    app.controller('controller', ['$scope', function ($scope) {
        $scope.create_obj = {
            sex:'male',
            login_account:'account1',
            login_password:'password',
            student_name:'name'
        };
        function isNotGrayFun() {
            return ($scope.create_obj.login_account&&$scope.create_obj.login_password&&$scope.create_obj.student_name);
        }
        $scope.is_show_hightlight = isNotGrayFun;
    }]);

</script>

我正在使用Chrome。 我在控制台中看不到任何错误。 谁知道如何解决问题。

Answer 1

您的ng-class合成音不正确。 它应该是：

<button ng-class="{'grey-button-style': is_show_hightlight()}" ng-click="createAccountFun()" class="create-button-style">Create</button>

JSFiddle上的演示。

---

注意：如果要逆转条件，只需输入! ：

ng-class="{'grey-button-style': !is_show_hightlight()}"