Question

我正在创建动态表单，其中文本框的数量取决于情况。在每个文本框上我都应用了一个算术公式。这个公式也来自数据库表。

我的表单结构将是

<div ng-app="" id='my_id'>
<input type="text" ng-model='P1' name='P1' />
<input type="text" ng-model='P2' name='P2' value='{{ P1 + 10 }}' />
<input type="text" ng-model='P3' name='P3' value='{{P2 * 10}}' />
<input type="text" ng-model='P4' name='P4' value='{{P1 + P2}}' />
</div>

文本框名称和公式＆＃34; P1 + 10＆＃34;这个公式来自表格。我怎么能做到这一点。

在服务器端创建的文本框。并通过ajax函数获取。我的服务器端代码是

    <div ng-app="" id='my_id'>
    </div>
    $.ajax({url: "create_form.php", success: function(result){
            $("#my_id").html(result);
        }});

    //create_form.php

        $htmlData = "";
        $htmlData .= "<input type='text' ng-model='P1' name='P1' ng-change='calc()'/>";
        $htmlData .= "<input type='text' ng-model='P2' name='P2' ng-change='calc()'/>"; //P1 + 10 dynamic formula may change every time
        $htmlData .= "<input type='text' ng-model='P3' name='P3' ng-change='calc()'/>"; //P2 * 10 dynamic formula may change every time
        $htmlData .= "<input type='text' ng-model='P4' name='P4' ng-change='calc()'/>"; //P1 + P2 dynamic formula may change every time
        echo $htmlData;
        exit();

//Div Become
<div ng-app="" id='my_id'>
    <input type="text" ng-model='P1' name='P1'  ng-change='calc()' />
    <input type="text" ng-model='P2' name='P2'   ng-change='calc()'/>
    <input type="text" ng-model='P3' name='P3' ng-change='calc()' />
    <input type="text" ng-model='P4' name='P4'   ng-change='calc()'/>
    </div>

Answer 1

最佳计算控制器本身。因为大多数angularjs在使用input type="text"时忽略value属性。

＆＃13;

var app = angular.module('exApp',['ngSanitize']);

app.controller('ctrl', function($scope, exService,$sce){
$scope.P1 = 0;
$scope.P2 = $scope.P1 + 10;
$scope.P3 = $scope.P2 * 10; $scope.P4 = $scope.P1 + $scope.P2;
var fromSer = exService.getHtml();
$scope.newHtml = $sce.trustAsHtml(fromSer);
//use like below while call your API from Backend.

/*exService.getfromAPI().then(function(response){
$scope.ne = response;
})*/
 
$scope.calculate = function(){
$scope.P2 = Number($scope.P1) + 10;
$scope.P3 = Number($scope.P2) * 10;
$scope.P4 = $scope.P1 + $scope.P2;
}
});

app.service('exService', function($http){
var self= this;
self.getHtml = function(){
var html = '<input type="number" ng-model="P1" ng-change="calculate()" name="P1" />';
return html;
}
/*self.getfromAPI = function(){
var  data={method: 'GET',url:'api/getTag'};
return $http(data);
}*/
});
app.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}])

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div>
<div ng-bind-html="newHtml"></div><br> <div compile="newHtml"></div>
<input type="number" ng-model='P1' ng-change="calculate()" name='P1' />
<input type="text" ng-model='P2' name='P2'/>
<input type="text" ng-model='P3' name='P3'/>
<input type="text" ng-model='P4' name='P4' />
</div>
</body>

＆＃13;

Answer 2

您可以将 ng-change 指令添加到输入字段。
我们可以使用$watch更改输入。

使用ng-change：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
  $scope.calc = function(P1) {
    $scope.P2 = parseInt(P1) + 10;
    $scope.P4 = parseInt(P1) + parseInt($scope.P2);
    $scope.P3 = parseInt($scope.P2) * 10
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input type="text" ng-model='P1' name='P1' ng-change="calc(P1)"/>
<input type="text" ng-model="P2" name='P2'/>
<input type="text" ng-model='P3' name='P3'/>
<input type="text" ng-model='P4' name='P4'/>
</div>

使用$ scope。$ watch：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
  $scope.calc = function(P1) {

  }
  $scope.$watch('P1', function (value) {
    $scope.P2 = parseInt(value) + 10;
    $scope.P4 = parseInt(value) + parseInt($scope.P2);
    $scope.P3 = parseInt($scope.P2) * 10
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input type="text" ng-model='P1' name='P1' ng-change="calc(P1)"/>
<input type="text" ng-model="P2" name='P2'/>
<input type="text" ng-model='P3' name='P3'/>
<input type="text" ng-model='P4' name='P4'/>
</div>

动态文本框上的角度Js动态算术公式计算

2 个答案: