Question

我写了一个经典的角度形式，有4个区域：语言，货币，日期格式和金额格式。这是我的完整.html代码：

<uib-tab index="1" heading="{{'GENERAL_SETTINGS_LABEL' | translate}}">
  <section class="general-settings">
    <div class="listing">
      <ul>
        <li>
          <label for="language">{{'LANGUAGE_LABEL' | translate}}</label>
          <select id="language" name="language" ng-model="paramsGEN.lan.paramUserValue">
          <option value="en">{{'referencedata.languages.EN' | translate}}</option>
          <option value="nl">{{'referencedata.languages.NL' | translate}}</option>
          </select>
        </li>
        <li>
          <label for="currency">{{'CURRENCY_LABEL' | translate}}</label>
          <select id="currency" name="currency" ng-model="paramsGEN.cur.paramUserValue">
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="GBP">GBP</option>
          </select>
        </li>
        <li>
          <label for="date-format">{{'DATE_FORMAT_LABEL' | translate}}</label>
          <select id="date-format" name="date-format" ng-model="paramsGEN.date.paramUserValue">                              
          <option value="dd/MM/yyyy">dd/MM/yyyy</option>
          <option value="dd-MM-yyyy">dd-MM-yyyy</option>
          <option value="MM/dd/yyyy">MM/dd/yyyy</option>
          <option value="yyyy-MM-dd">yyyy-MM-dd</option>
          <option value="MM-dd-yyyy">MM-dd-yyyy</option>
          <option value="yyyy/MM/dd">yyyy/MM/dd</option>
          </select>
        </li>
        <li>
          <label for="amount-format">{{'AMOUNT_FORMAT_LABEL' | translate}}</label>
          <select id="amount-format" name="amount-format" ng-model="paramsGEN.amt.paramUserValue">
          <option value="1 234 567,89">1 234 567,89</option>
          <option value="1 234 567.89">1 234 567.89</option>
          <option value="1.234.567,89">1.234.567,89</option>
          <option value="1,234,567.89">1,234,567.89</option>
          </select>
          </li>
          </ul>
        </div>
        </section>
        <section class="controls">
          <div class="controls-wrapper">
            <button type="button" ng-click="saveGeneralParams();" class="apply bt">{{'APPLY_LABEL' | translate}}</button>
            </div>
        </section>
    </uib-tab>

我想要做的是，如果用户打开控制台（F12按钮并检查元素）并想要更改区域的值，例如“语言”，则使用列表中不存在的其他值< / strong>即可。例如，他打开控制台并更改此行：

<option value="sp"> 

然后，如果他想通过点击保存按钮进行保存，我必须禁用此按钮。我希望其他领域能够实现这一目标。

我不知道我该怎么做。是否可以在此html文件中添加对初始值的检查，或者是否必须在我的控制器中为其添加特殊功能???

提前谢谢!!

Answer 1

您需要编写自己的函数来检查每个ng模型上设置的值，然后使用该函数禁用提交按钮（禁用ng）。

像

这样的东西

System.Environment.SpecialFolder.CommonPictures

然后在你的html按钮

app.controller('myCtrl', ['$scope',function($scope) {
    $scope.validate = function() {
        if($scope.paramsGEN.lan.paramUserValue === 'en' || $scope.paramsGEN.lan.paramUserValue === 'nl') {
           return false;
        }
        return true;
    }
}]);

Answer 2

我想要做的是，如果用户打开控制台（F12按钮   并检查元素）并希望更改区域的值   例子＆＃39;语言＆＃39;与另一个不在列表中的值。对于   例如，他打开控制台并更改此行：

  然后，如果他想通过点击保存按钮保存，我必须   禁用此按钮。我希望其他领域能够实现这一目标。

Javascript是客户端的。从客户端，您永远无法确定阻止智能或恶意用户禁用某些控件，修改某些对象或使用您认为不可接受的数据向服务器发送请求。
一些Javascript库和实践可能会使恶意用户行为变得更难，但它总是有限的。

单一的真正保护来自服务器端。如果您认为必须保护某些处理（此处为有效值），则应在服务器端进行检查。

更新：在评论中询问了解决方案

我们的想法是使用ng-disabled按钮属性来映射到$scope controller中的变量。
如果提交的语言是可接受的，没问题，否则，我们会离开处理，我们通过$scope controller中的变量禁用按钮。

因此，在按钮中添加ng-disabled属性：

<button ng-disabled="isDisabled" type="button" 
         ng-click="saveGeneralParams();" class="apply bt" ></button>

并在saveGeneralParams()开头添加：

 $scope.saveGeneralParams = function() {
      if($scope.paramsGEN.lan.paramUserValue != 'en' && $scope.paramsGEN.lan.paramUserValue != 'nl') {
          $scope.isDisabled = true;
          return;
        }

修改后（在控制台中）以角度形式

2 个答案: