Question

我需要能够使用Angular对输入中的字符进行计数那么如果字符数大于60，则使用textarea。

我想我可以在我的剧本中做到这一点：

//my initial display value
$scope.display = "this is a particularly long string that i'm using to test this functionality";
//storing the length of the display variable
$scope.charCount = $scope.display.length;

然后我在charCount条件中使用ng-if变量来确定是否使用input 或 textarea。

<div id="ctrl_{{field.id}}" ng-controller="controller" data-custom-focus="true" ng-if="charCount <= 60">
    <input
        type="text"
        ng-bind="display"
        ng-value="display">
</div>
<div id="ctrl_{{field.id}}" ng-controller="controller" data-custom-focus="true" ng-if="charCount > 60">
    <textarea
        type="text" 
        ng-bind="display"
        ng-value="display" >
    </textarea>
</div>

奇怪的是，这不会呈现任何一个元素。我对Angular很新，所以我不确定问题是什么。

Answer 1

使用您的控制器使用父范围。

您可以像以下一样使用它：

<div ng-controller="MyCtrl">
<div data-custom-focus="true" ng-if="charCount => 60">
    <input
        type="text"
        ng-bind="display"
        ng-value="display">
</div>
<div data-custom-focus="true" ng-if="charCount < 60">
    <textarea
        type="text" 
        ng-bind="display"
        ng-value="display" >
    </textarea>
</div>
</div>

Answer 2

只需从两个元素中删除ng-controller="controller"即可。它应该工作。

 <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount <= 60">
    <input type="text" ng-bind="display" ng-value="display">
  </div>
  <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount > 60">
    <textarea type="text" ng-bind="display" ng-value="display">
    </textarea>
  </div>

<强> version 2.1 documentation

Answer 3

您可以使用一个ng-controller并将input / textarea的条件放在此控制器的范围内。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.display = "this is a particularly long string that i'm using   to test this functionality";
 //storing the length of the display variable
 $scope.charCount = $scope.display.length;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount <= 60">
        <input type="text" ng-bind="display" ng-value="display"> </div>
    <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-if="charCount > 60">
        <textarea type="text" ng-bind="display" ng-value="display"> </textarea>
    </div>
</div>

Answer 4

一些错误

正在使用ng-bind作为输入字段使用 ng-bind
删除表单div ng-controller="controller"

使用ng-show而不是 ng-if 在您的视图中使用display.length，因为有一些边界可以使用ng-if

试试这个

<!DOCTYPE html>
<html ng-app="app">
<head>
	<title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
  <script type="text/javascript">
      var app = angular.module('app', []);

      app.controller('OneController', function ($scope) {
        $scope.display = 'ssss'
        $scope.changedInput = function (argument) {

        }

    });
</script>
</head>
<body ng-controller="OneController">
    {{aa}}

    <div data-custom-focus="true" ng-show="display.length <= 60">
        <input
        type="text" ng-change = "changedInput()"
        ng-model="display"
        ng-value="display">
    </div>
    <div data-custom-focus="true" ng-show="display.length > 60">
        <textarea ng-change = "changedInput()"
        type="text" 
        ng-model="display"
        ng-value="display" >
    </textarea>
</div>
Count: {{display.length}}

</body>
</html>

Answer 5

<div id="ctrl_{{field.id}}" data-custom-focus="true" ng-show="display.length <= 60">
<input
    type="text"
    ng-bind="display"
    ng-value="display">
</div>
  <div id="ctrl_{{field.id}}" data-custom-focus="true" ng-show="display.length > 60">

<textarea
    type="text" 
    ng-bind="display"
    ng-value="display" >
</textarea>

如果输入大于60个字符，请使用textarea而不是

5 个答案: