Angular JS筆記

概述

沒有系統學習過前端或Angular，遇到問題都是Google，此文記錄一下Angular的使用筆記。

正則實時校驗并清空非法輸入

$scope.clearNum = function (e) {
    var curtarget = $(e.currentTarget);
    var curval = curtarget.val();
    var r = /^(([1-9][0-9]*)|(0)|([0-9][0-9]*[.])|([0-9][0-9]*[.][0-9]*)|([-])|([-][1-9][0-9]*)|([-][0-9][0-9]*[.])|([-][0-9][0-9]*[.][0-9]*)|([-][0]))$/;
    if (!r.test(curval)) {
        curtarget.val("");
    }
}      

<input ng-model="data.scorestart" ng-keyup="clearNum($event)" />      

ng-show

​

​ng-show​

​​的一個簡單執行個體，​

​ng-show​

​裡需要對應js scope裡的一個預定義的方法。

<div style="" ng-show="hasAdminRole(user.roleName)">      

const adminList = ['質檢主管',....];
/**
 * 是否有 主管 權限
 * @param str str
 * @return boolean
 */
$scope.hasAdminRole = function(str) {
  if (str == null || str === '') {
    return false;
  }
  return adminList.includes(str);
};      

ng-disabled not working with ​

​<i>​

​ tag using font-awesome

遇到的問題如下：控制如下圖右側下拉清單的HTML代碼是由​

​<i>​

​标簽包裝：

<i class="fa fa-sort-desc" aria-hidden="true" style="color: #555;cursor: pointer;"
ng-click="showgroupslist()"></i>      

在特定場合下，需要将下拉清單置灰，即不可再選擇，一開始考慮使用​

​ng-disabled​

​标簽，

<i class="fa fa-sort-desc" aria-hidden="true" style="color: #555;cursor: pointer;"
ng-click="showgroupslist()" ng-disabled="uploadFileWay1"></i>      

但是這樣并不生效，SO上面也有類似的問題：​​ng-disabled not working with tag using font-awesome​​​，解決方法是使用​

​<button>​

​包裝一下，即：

<button>
    <i class="fa fa-sort-desc" aria-hidden="true" style="color: #555;cursor: pointer;"
       ng-click="showgroupslist()" ng-disabled="uploadFileWay1"></i>
</button>      

但是這樣的效果卻是：不滿足特定條件時，下拉清單被隐藏！！完全不行，不過這倒是給出解決方法的提示。

<i class="fa fa-sort-desc" aria-hidden="true" style="color: #555;cursor: pointer;"
ng-click="showgroupslist()" ng-hide="uploadFileWay1"></i>      

通過ng-class實作不同情況下展示不同樣式

<style>
    .colorRed {
        color: red;
    }

    .colorGreen {
        color: green;
    }
</style>
<div ng-class="{true:'colorRed',false:'colorGreen'}[tip=='配置設定失敗']"
style="float:right;margin-top: 8px;">{{tip}}</div>      

$http.post("check/saveRuleUserset.do", {data: angular.toJson($scope.data)}).success(function (response) {
  let tip;
  if (response.status === '1') {
    tip = "成功";
    okrefresh();
  } else {
    tip = "配置設定失敗";
  }
  $scope.tip = tip;
  return false;
});