Question

为什么使用ng-model时文本区域数据不能与ng-bind一起使用？

<div class="col-sm-5 col-md-5">

  <div id="out">
    {{objInput}}
  </div>

  <div id="out2" ng-bind="out2"></div>

</div>

这是plnkr http://plnkr.co/edit/srYQnpHudt7gfeOXN1ff?p=preview

Answer 1

objInput

因此，您需要在ng-bind中使用属性名称{{1}}。

Answer 2

我认为问题是你只在创建控制器时分配txt变量。如果将变量移动到生成函数中，它就可以工作。

$scope.generate = function() {
  var txt = $scope.objInput;
  $scope.out2 += JSON.stringify(txt);
  console.log(txt);
};

Answer 3

只有在实例化控制器时才分配txt变量。你可以这样做：

$scope.generate = function (){
    $scope.out2 = JSON.stringify($scope.objInput);  
};

或者，您可以在函数内部txt：

$scope.generate = function (){
  var txt  = $scope.objInput;
  $scope.out2 = JSON.stringify(txt);
  console.log(txt); 
};

或发送txt作为函数参数：

<button id="gJson" class="form-control btn btn-primary" ng-click="generate(objInput)"> Write</button>


$scope.generate = function (txt){
  $scope.out2 = JSON.stringify(txt);
  console.log(txt);
};

Answer 4

仅在控制器初始化中将值分配给txt。当objInput的值发生变化时，您还必须更改txt值。在这种情况下，您可以使用监视功能，然后更改txt值。

代码：

(function(){
var app = angular.module('cApp', []);
app.controller('cCtrl', function($scope) {
    $scope.objInput = '';
    var txt  = $scope.objInput;
    $scope.$watch('objInput', function(oldValue,newValue) {
      txt = newValue;
    })
        $scope.generate = function (){
    $scope.out2 = JSON.stringify(txt);
        console.log(txt);

        };
});// Fin qCtrl
//-----------------------------------------------------------------------------
})();

Updated Plunkr

More on watch

Answer 5

HTML：

<div class="col-sm-5 col-md-5">
    <textarea class="form-control" rows="3" ng-model="objInput"></textarea>
    <button id="gJson" class="form-control btn btn-primary" ng-click="generate(objInput)"> Write</button>
  </div>    
<div class="col-sm-5 col-md-5">
    <div id="out">
      {{objInput}}
    </div>
    <div ng-bind="out2"></div>
  </div>

JS：

    (function() {
  var app = angular.module('cApp', []);
  app.controller('cCtrl', function($scope) {
    var txt = $scope.objInput;
    $scope.generate = function(txt) {
      $scope.out2 = txt;
    };
  }); 
})();

试试这个

角度textarea数据是NaN

5 个答案: