Question

<form novalidate>
    <label>Name</label> 
        <input type="text" name="name" ng-model="newcontact.name" required/>
    <label>Email</label> 
        <input type="text" name="email" ng-model="newcontact.email" required/>
    <label>Phone</label> 
        <input type="text" name="phone" ng-model="newcontact.phone" required/>
        <br/>
        <input type="hidden" ng-model="newcontact.id" />

     <input type="button" ng-if="newcontact.id" value="UPDATE" ng-click="saveContact()" />
     <input type="button" ng-if="!newcontact.id" value="SAVE" ng-click="updateContact()" />
    </form>

考虑上面的表格，在这个创建/编辑中使用相同的模板，所以我喜欢展示根据newcontact.id值将按钮名称设置为“UPDATE”或“SAVE”。

只需要专注于这些：

<input type="button" ng-if="newcontact.id" value="UPDATE" ng-click="saveContact()" />
         <input type="button" ng-if="!newcontact.id" value="SAVE" ng-click="updateContact()" />

由于角度没有ng-else，所以如何实现这一点。

还需要知道。 2.如何在AngularJS中保护用户的业务逻辑

Answer 1

那么，

您可以在此处使用ng-show，而不是使用按钮：

<button ng-click="save()">
  <span ng-show="newcontact.id">Update</span>
  <span ng-show="!newcontact.id">Save</span>
</button>

使用保存功能，对newcontact.id的状态做出反应：

angular.module('my.module').controller(['$scope', function($scope) {
  $scope.save = function() {
     if(typeof scope.newcontact.id === 'undefined') {
       // save
     } else {
       // update
     }
  }
}]);

编辑：另一个选择可能是不能决定它是否是新的联系人：

angular.module('my.module').controller(['$scope', function($scope) {
   $scope.newcontact = {};
   $scope.save = function() {
     /** Your save function */
   }
   // with a set contact, this will now always evaluate to 'Save'
   $scope.label = !!scope.newcontact.id ? 'Update' : 'Save';

   // so we go for something different:
   $scope.$watch('newcontact', function(newValue) {
     //this watches the newcontact for a change, 'newValue' is the new state of the scope property
     $scope.label = !!newValue.id ? 'Update' : 'Save';
   });
}]);

注意：这只是一个粗略的例子，您应该将服务与API结合使用来保存您的用户。该示例的作用基本上是观察范围属性并相应地更改标签。有关更详细的说明，请参阅here。

然后以下列形式使用它：

<button ng-click="save()">{{label}}</button>

编辑2：回答关于从用户隐藏业务逻辑的问题 - 你根本做不到。 AngularJS是一个JavaScript框架，您可以为用户浏览器提供运行应用程序的完整代码。如果您确实拥有敏感逻辑，请将其放在服务器端并向其公开接口（例如，通过JSON API）。

AngularJS在条件ng-if上显示SAVE和UPDATE BUTTON

1 个答案: