我希望能够在 <textarea> 中编辑和显示复杂模型元素。这是用于从 JSON 响应动态生成模型字段的 HTML 片段:
<p>parent uuid*: </p>
<input ng-model="parentUuid" capitalize type="text" placeholder="String"
class="form-control" style="width:200px; display: inline-block;"/> <br/>
<p>resource*:</p>
<select ng-model="childResource" ng-change="loadResourceFields(childResource)"
class="form-control" style="width:300px; display: inline-block;">
<option ng-repeat="childResource in restResources">{{childResource}}</option>
</select>
<div ng-repeat="field in childFields">
<div ng-show={{!field.isEnum}}>
<p ng-show={{field.isRequired}}>{{field.name}}*: </p>
<p ng-show={{!field.isRequired}}>{{field.name}}: </p>
<input type="text" ng-model="createChildResource[field.name]"
class="form-control" style="width:200px; display: inline-block;" placeholder="{{parseClassName(field.type)}}">
</div>
<div ng-show={{field.isEnum}}>
<p ng-show={{field.isRequired}}>{{field.name}}*: </p>
<p ng-show={{!field.isRequired}}>{{field.name}}: </p>
<select ng-model="createChildResource[field.name]" class="form-control" style="width:auto; display: inline-block;">
<option></option>
<option ng-repeat="enumValue in field.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>
</select>
</div>
</div>
<div class="preview">
<p>Preview: </p>
<textarea style="height:350px; width:550px; overflow:scroll;">{{createChildResource | json}}</textarea >
</div>
输出如下:
但是如果我尝试添加 ngModel到 textarea 元素，以便能够像这样就地编辑此值:
<div class="preview">
<p>Preview: </p>
<textarea ng-model="createChildResource" style="height:350px; width:550px; overflow:scroll;">{{createChildResource | json}}</textarea>
</div>
然后输出如下:
在这两种情况下，我都无法在文本区域元素中编辑我的模型。
如何实现？我希望能够像在 this example 中那样就地显示和编辑我的模型略有不同:editable-textarea="user.description"应该是 editable-textarea="user" .
最佳答案
我终于明白你要达到什么目的了。在左侧，您有一堆输入，在右侧(底部)，您有一个文本区域，它将输入排列为一个对象的属性，并将它们显示为一个对象的格式。
您的要求是允许用户编辑文本区域中的属性值，从而更新输入中的相应属性值。
首先，如评论所述，将对象转换为字符串，然后将其显示在文本区域内。
接下来，由于您需要在文本区域更新时使用react并更新输入字段，因此您需要观察文本区域的值并更新原始对象(已转换为字符串的对象) ).
由于您的代码太复杂而难以理解，因此在此使用示例，假设您有对象 containerObject 如下:
$scope.containerObject = {
property_1: "Hello",
property_2: "World"
};
然后您的输入将使用这些属性:
<input ng-model="containerObject.property_1">
<input ng-model="containerObject.property_2">
现在，您希望在文本区域内显示它 - 您首先要将对象转换为字符串并按如下方式显示:
$scope.getObjectAsText = function () {
$scope.textAreaModel = JSON.stringify($scope.containerObject);
};
您的文本区域标记将如下所示:
<textarea ng-model="textAreaModel"></textarea>
每次输入文本框中的值发生变化时，文本区域也会更新。
现在，反过来说。当您更改文本区域时，要更新输入文本框，您需要观察字符串模型(而不是对象模型):
$scope.$watch('textAreaModel', function () {
try {
$scope.containerObject = JSON.parse($scope.textAreaModel);
} catch(exp) {
//Exception handler
};
});
您需要有 try...catch 异常处理程序 block ，因为用户可能会意外更改内容，从而在转换回对象时，结果不是合适的对象(无效的属性或语法无效)。
只要更改属性值，输入值就会正确更新。
关于javascript - Angular JS在textarea中显示和编辑模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22783268/
我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？ 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss
我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article