【问题标题】:values not saving from ng submit for textarea未从 ng 为 textarea 提交保存的值
【发布时间】:2016-03-18 18:29:14
【问题描述】:

我正在尝试模拟审查系统。 ng 如何将传递值提交给控制器?

在我的控制器中,我有

$scope.reviews = function() {
  $scope.rating = 0;
  $scope.max = 5;
};
$scope.myTextArea = '';
$scope.saveReview = function(rating, myTextArea) {
  console.log(rating);
  console.log(myTextArea);
};

在我看来,我有:

<form name="reviewForm" class="form-horizontal" ng-submit="saveReview(rating,    myTextArea)" novalidate>
  <div>
    <rating ng-model="rating" max="max" aria-labelledby="'product.title'"></rating>
  </div>
  <div>This is the rating: {{rating}}</div>
  <div class="animate-switch" ng-switch-when=true>
    <textarea ng-model="myTextArea" class="form-control" placeholder="Write a short review of the product." title="Review"></textarea>
  </div>
  <button type="submit" class="btn btn-primary pull-right">Submit Review</button>
</form>

当我提交表单时,将调用 saveReview 函数,并且控制台中的打印输出为 0 和 ''。因此,没有任何值被保存/传递。 Ng-model 评分显示 5 星,如果您点击 4 星,{{rating}} 将显示 4。

有什么想法吗?

【问题讨论】:

    标签: javascript angularjs forms ng-submit


    【解决方案1】:

    不要将任何内容传递给ng-submit 上的saveReview() 函数。而是让saveReview() 使用范围内的变量。还将变量封装在对象中。例如:ng-model="review.rating"ng-model="review.text"。假设有很多,无论如何你都需要一个作为对象;)

    $scope.saveReview = function() {
      console.log($scope.review.rating);
      console.log($scope.review.text);
    };
    

    【讨论】:

    • 嗯,也许我遗漏了一些信息。我正在使用显示以下部分的 ng-repeat:product.name selectable stars special reviewbox if 2 or less stars are selected 因此,如果我封装变量,我开始弄乱星星。评论代码是这样的: $scope.reviews = function () { $scope.products = Products.query(); $scope.review.rating = 0; $scope.max = 5; };我在页面渲染开始时调用了这个审查函数。
    • 封装可以更轻松地为任何其他操作传递数据,它不应该影响任何事情。我假设提交当时只对一个条目进行操作。因此,如果您正在遍历条目,那么它就更有意义了。只需让 save 函数不带参数并使用范围内的变量即可。否则我需要更多信息,实际问题是什么。
    • 感谢您的输入和快速回复。我会再努力一些。我对角度很陌生。如果您愿意推荐任何资源,我将不胜感激。
    • 有大量的教程和示例,我推荐观看 egghead.io 的视频格式的教程,他们有很棒的免费视频,应该可以教给你很多东西。
    猜你喜欢
    • 1970-01-01
    • 2018-11-15
    • 1970-01-01
    • 1970-01-01
    • 2019-09-12
    • 2020-01-13
    • 2012-12-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多