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> 

Demo on JSFiddle.

---

Примечание: Если вы хотите, чтобы инвертировать состояние, просто поставить !:

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