Question

第1步：创建index.php / index.html

单击“保存”按钮文本框字段以附加到“表格行”

中

<!DOCTYPE html>
<html lang="en-US">
<title>My First AngularJS Work</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">

<div ng-controller="myCtrl">
  <p>Category Code : <input type="text" ng-model="code" ng-blur="validatecode()"></p>
  <span style="color:red">{{ msg }}</span>
  <p>Category Name : <input type="text" ng-model="name" ng-blur="validatename()"></p>
  <span style="color:red">{{ msg1 }}</span>
  <p><input type="button" name="save" value="Save" ng-click="myFunc()"></p>
  <div>
    <table border="1">
        <thead>
            <tr><td>Category Code</td><td>Category Name</td></tr>

        </thead>
        <tbody>
            <tr ng-repeat="category in categories">
                <td>{{category.code}}</td>
                <td>{{category.name}}</td>
            </tr>
        </tbody>
    </table>
  </div>
</div>
<script src="js/validation.js"></script>
</body>
</html>

单击“保存”按钮时，调用myFunc（）函数。

步骤2：创建validation.js文件：

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    $scope.categories = [];

        /* Validate Code Function */
        $scope.validatecode = function(){
            if(!$scope.code){
                 $scope.msg = 'Please Enter Category code';
            }else{
                $scope.msg ='';
            }
        };


        /* Validate name Function */
        $scope.validatename = function(){
            if(!$scope.name){
                 $scope.msg1 = 'Please Enter Category name';
            }else{
                $scope.msg1 ='';
            }
        };

        /* Call Save button */
        $scope.myFunc = function(){
            if(!$scope.code || !$scope.name){
                 $scope.msg = 'Please Enter Category code';
                 $scope.msg1 = 'Please Enter Category name';
            }else{
                $scope.categories.push({'code':$scope.code,'name': $scope.name});
                $scope.code='';
                $scope.name='';
                $scope.msg ='';
                $scope.msg1 ='';
            }
        };
}]);

那就是，干杯!!!

AngularJs - 单击保存按钮文本框字段以附加到表格行中

0 个答案: