angularjs textarea - 如何使其与 angularjs 下拉列表中的选定值保持同步答案

【问题标题】：angularjs textarea - how to keep it in sync with angularjs dropdowns selected valuesangularjs textarea - 如何使其与 angularjs 下拉列表中的选定值保持同步
【发布时间】：2023-03-18 23:39:01
【问题描述】：

我有几个下拉菜单，根据选择我更新了 textarea 内容，但是当我尝试更新该功能的文本时，我认为会被触发，并且不允许我更新。

这是我的html：

 <textarea  ng-model="desc" ng-change="des"></textarea>

和角度

不知何故，代码被删除了。请访问 plunker：http://plnkr.co/edit/pVSiNrnAOY0A5v0iTmYQ?p=preview

【问题讨论】：

des() 是一个函数而不是模态变量，所以你需要添加括号。
@Sam 更新了它并使它成为一个函数，它仍然是一样的。
@TechnoCart 没用。
您期望 $scope.d 返回什么？它还没有设置，也许你的意思是返回$scope.d()，但这可能会导致无限循环，因为函数更新$scope.desc会触发ng-change...
@Sam $scope.d 返回一个字符串，它与 $scope.desc 和 $scope.dsc 具有相同的值。我尝试了不同的方法，但无法计算......所以它是使用这么多变量来返回相同的值有点多余。

标签： javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat

【解决方案1】：

最好使用监视函数，尤其是当控制器中的值可能发生变化时，因为这样可以确保它们保持同步。这个解决方案似乎也更容易看到发生了什么： plunkr solution

只需使用监视功能来监视所选值：

 $scope.$watch('selectedId', function(newValue){
    $scope.d();
  });

我不确定您是否希望用户能够更改文本区域中的值。如果您不这样做，就像在您的示例中那样，那么我建议您将属性 ng-disabled="true" 添加到您的文本区域。

【讨论】：

太好了，很高兴我能帮上忙！

【解决方案2】：

你还需要

$scope.des = function() {
    return $scope.d()
  }

不确定您要做什么，但如果刚刚完成了这个

// Code goes here
app = angular.module('myapp',[]);
app.controller('main', function($scope) {
  $scope.desc = "";
  $scope.stat = "test";
  $scope.d = function() {
    for (var i = 0, len = $scope.stat.length; i < len; i++) {

      if ($scope.stat[i].Id == $scope.selectedId && $scope.statDate == $scope.stat[i].StatDate) {
        $scope.desc = $scope.stat[i].D;
        return $scope.stat[i].D;
      }
    }
    return "";
  };

  $scope.des = function() {
    return $scope.d()
  }
});

如果我发表评论，我会收到您的问题

// $scope.desc = $scope.stat[i].D;

它有效，但我想你需要那个位:)

你想做什么？我认为您正在尝试在视图更改时更改模型。您可能需要一个指令。

这是我为日期时间所做的事情的一部分

.directive('formatteddate', function ($filter) {
    return {
        link: function (scope, element, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue) {

这是您的代码/html 的一部分。

http://plnkr.co/edit/3GjP7YVsKFIYAAJQwmOK?p=preview

【讨论】：

如果你注释掉'那'行代码，如果你改变了这行代码，它会起作用。 :)
这个 // $scope.desc = $scope.stat[i].D;您可以将此代码更改为可以更改 .desc 并且有效的代码，但我不明白您在做什么。
它在这个 plunk 中不起作用的原因是因为 $scope.stat 和 $scope.statDate 以及所有这些废话都是未定义的。这样 if 语句总是 100% 的时间计算为真，所以总是运行那段代码，将 $scope.desc 重置为未定义的变量。因此，您尝试键入并立即重置。我假设当您输入某个值时，他正试图将值更改为某个特定值。他没有为此提供代码。
@Steve Drake, $scope.selectedId 和 $scope.statDate 是从 1-20 和另一个“03/20/2015”和 :"03 的 json 数组中选择的两个下拉菜单/26/2015"...... stat 数组是这样的： $scope.stat = ([{"Id":1,"D":"ABCD","StatDate":"03/20/ 2015"}, {"Id":2,"D":"ABCD" ,"StatDate":"03/26/2015"}]);
那么，当您编辑文本框时，如果 Id=1 并且 StartDate 正确，您希望它设置为 ABCD？我添加了 // Fake dropdown $scope.selectedId =1; $scope.statDate = '03/20/2015'

【解决方案3】：

好的，如果您只是将 textarea 的 ng-model 值更新为您的选择下拉列表的值。

这里是笨蛋 http://plnkr.co/edit/mXQTcBu5rOJaQJKEFKpm?p=preview

将模型名称更改为一些：

 <textarea ng-model="textarea" ng-change="desc()"></textarea>

然后在代码逻辑所在的脚本中更新：

$scope.d = function() {
    for (var i = 0, len = $scope.stat.length; i < len; i++) {
      console.log(i);
      if ($scope.stat[i].Id == $scope.selectedId && $scope.statDate == $scope.stat[i].StatDate) {
        $scope.desc = $scope.stat[i].D;
        **$scope.textarea=$scope.desc;**
        return $scope.stat[i].D;
      }
    }
    return "";
  };

【讨论】：

它的工作原理，它可以让你修改以前没有发生的文本区域。