Question

我想在单击编辑按钮时只读取一个字段，但是在单击添加按钮时可以输入值。我试过角度ng-readonly但到目前为止还没有工作。有什么建议吗？

HTML

                        <tr ng-repeat="row in rowCollection">
                            <td><span editable-text="row.inputToken" e-name="inputToken" e-form="gridForm" ng-disabled="row.isreadonly">{{row.inputToken}}</span></td>
                            <td><span editable-text="row.standardForm" e-name="standardForm" e-form="gridForm">{{row.standardForm}}</span></td>
                            <td><span editable-select="row.classification" e-name="classification" onshow="" e-form="gridForm">{{row.classification}}</span></td>
                            <td><span editable-text="row.similarityThreshold" e-name="similarityThreshold" e-form="gridForm">{{row.similarityThreshold}}</span></td>

                            <td style="white-space: nowrap">

                                <form editable-form name="gridForm" onbeforesave="saveRecord($data)" ng-show="gridForm.$visible" class="form-buttons form inline" shown="inserted == row">
                                    <button type="submit" ng-disabled="gridForm.$waiting" class="btn">Save</button>
                                    <button type="button" ng-disabled="gridForm.$waiting" ng-click="cancelRecord();gridForm.$cancel()" class="btn">Cancel</button>
                                </form>
                                <div class="buttons" ng-show="!gridForm.$visible">
                                    <button class="btn" type="button" ng-click="gridForm.$show()">Edit</button>
                                    <button class="btn" type="button" ng-click="deleteRecord($index)">Delete</button>
                                </div>
                            </td>
                        </tr>
                        </tbody>

Controller.js

var stan = angular.module('stanuiApp', ['ui.bootstrap','smart-table','xeditable']);

stan.run(function(editableOptions){
    editableOptions.theme = 'default';
});

stan.controller('MainCtrl',function ($scope, $window, $http,$filter) {
    $scope.root = {};
    $scope.items = [];

    $scope.rowDummy = [
                    {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900},
                    {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900},
                    {inputToken: 'awesome user1',standardForm:'fdffd',classification:'sadfdaf',similarityThreshold:900}
                  ]; 

    $scope.init = function() {
         $http({
                  method : 'GET',                    
                  url : 'http://localhost:9080/StanClassification/ClassificationServlet',
                  data:"",
                  headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

          }).success(function(data, status, headers, config) {
                  $scope.root = data;
          }).error(function(data, status, headers, config) {
                  console.log("error");
          });

      $http({
          method : 'POST',             
          url : 'http://localhost:9080/StanClassification/ClassificationServlet',
          data: 'ruleName=' + 'DENAME',
          headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}

         }).success(function(data, status, headers, config) {
                 $scope.options = data.options;
                 $scope.items = data.classifications;
                 $scope.rowCollection = [].concat($scope.items);

                 //console.log("hjhdj--"+JSON.stringify($scope.rowCollection));

         }).error(function(data, status, headers, config) {
                 console.log("error");
         });

    };

    $scope.addRecord = function() {
            console.log("In add record");
        // console.log("before "+JSON.stringify($scope.rowCollection)); 
        $scope.add = true;
        $scope.inserted = {     
                    inputToken :'',
                    standardForm :'',
                    classification :'',
                    similarityThreshold :''
                };
        $scope.items.unshift($scope.inserted);
        //$scope.rowCollection = [].concat($scope.items);
        //$scope.items.unshift($scope.inserted);
        console.log("add  "+JSON.stringify($scope.items));  
    };

    $scope.cancelRecord = function() {

        if($scope.add === true)
        {
            $scope.add = false;
            console.log($scope.add);
            $scope.items.splice(0,1);
            console.log("cancel  "+JSON.stringify($scope.items));
        }

    };

Answer 1

您可以使用电子属性执行此操作。在您的情况下，您可以在您的范围内添加e-ng-readonly。喜欢

<span e-text="user.name" e-ng-readonly="flag">{{user.name}}</span>

这是一个例子 http://jsfiddle.net/n5L9wykx/

Angular Xeditable在单击编辑按钮时只显示表单字段

1 个答案: