jjzjj

javascript - 在 AngularJS 中设置动态 ng-model 名称

coder 2024-05-10 原文

还有类似的问题herehere ,虽然我的用例有点不同。

我有一个名为 uniqueLists 的对象,它看起来像这样:

$scope.uniqueLists - {
    name: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    Category: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ],
    designer: [
            'string1',
            'string2',
            'string3'
            // Lots of strings
    ]
}

我正在尝试从这个列表中构建一个搜索功能。目前,我可以像这样在页面上的复选框中显示所有列表项 (以下代码使用 Jade Node/ExpressJS 模板引擎,即使您也很容易理解不熟悉吧。Indent == 上面一行的子节点)

div(class="searchNav")
    p(ng-repeat="param in searchParams") {{param[0] + ' = ' + param[1]}}

    div.row-fluid(ng-repeat="(key,val) in uniqueLists")
        form(ng-model="???") {{key}}
            label.checkbox(ng-repeat="value in val")
                input(type="checkbox", ng-model="?????") 
                {{value}}

我唯一遇到问题的部分是表单和复选框的 ng-model。我想要 formng-model == {{key}}。我试过设置它,但它破坏了 Angular。我也尝试过 ng-model='uniqueLists[index][0]' 但是,同样,Angular 不会解析它,只是将每个表单的模型设为字符串 uniqueLists[index] [0]

同样处理 input 复选框,我想要它们的 ng-model="{{value}}"。有没有办法在我的 Controller 中执行此操作?我想不出任何可以在 ng-repeat 中运行的东西。

给任何遇到这个问题的人的小提示

正如您将在下面的答案/ fiddle 中看到的,当您在 ng-model 中引用对象/位置时,它们不会呈现为正确的名称在 DOM 中,但它们似乎与 Angular 一起工作,就好像它们一样。

例如,在上面的代码中,设置 ng-model="uniqueLists[key][val]" 在 DOM 中呈现为 ng-model="uniqueLists[key][ val]",但表现得好像它是 ng-model="uniqueLists[name][string1]"

这似乎是 Angular 的一个奇怪的怪癖,这让我很困惑,因为我在将它连接到我的 Controller 之前检查了浏览器中的 ng-model 名称,当我看到它不是' t 为正确的值解析对象我认为它不起作用。

最佳答案

我仍然不能完全确定我理解了你所有的问题,但我仍然会给你这个代码:http://jsfiddle.net/DotDotDot/7AU6A/1/

为了解释一下,我使用了一个稍微修改过的数据样本(为了拥有唯一的字符串),而不是创建一个简单地等于定义的 {{value}} 的模型,我将所有模型放在一个对象中,因此您可以轻松转到对象[键][值](在您的情况下,它类似于对象['name']['string1']),我将这些值关联到复选框。我唯一需要做的就是从数据样本对象创建它,这样它会强制 Controller 一次解析所有数据。

当您看到它在运行时,它非常简单(值显示在 fiddle 的底部)。假设您点击复选框名称=> string2,object['name']['string2'] 的值将对应于复选框的状态,这将由 ng-model 自动监视。

有了这个之后,用你的 Controller 修改每个复选框就很容易了,所以我添加了一点搜索功能来展示它的实际效果,你可以在搜索框中搜索用空格分隔的单词列表,然后单击搜索将选中匹配的复选框

在 HTML 方面,这不是一个大的修改(抱歉,我不熟悉你的模板,它将是直接的 HTML)

    <div ng-repeat='(key,val) in uniqueLists'>
       <form name='{{key}}'>
       {{key}}
            <p ng-repeat='value in val'>
                <input type='checkbox' ng-model='selectedData[key][value]' />{{value}}
            </p>
        </form>

    </div>

在 Controller 方面,这是我初始化模型的方式:

$scope.selectedData={};
for (var i in $scope.uniqueLists)
{
 $scope.selectedData[i]={}
     for(var j in $scope.uniqueLists[i])
     {
         $scope.selectedData[i][$scope.uniqueLists[i][j]]=false;
     }
}

最后一部分,搜索功能仅由循环组成以迭代所有搜索/模型值,我认为这是您必须修改的部分,以匹配您自己的搜索 Controller

这是你想要的吗?

关于javascript - 在 AngularJS 中设置动态 ng-model 名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17904779/

有关javascript - 在 AngularJS 中设置动态 ng-model 名称的更多相关文章

  1. ruby-on-rails - rails : keeping DRY with ActiveRecord models that share similar complex attributes - 2

    这似乎应该有一个直截了当的答案,但在Google上花了很多时间,所以我找不到它。这可能是缺少正确关键字的情况。在我的RoR应用程序中,我有几个模型共享一种特定类型的字符串属性,该属性具有特殊验证和其他功能。我能想到的最接近的类似示例是表示URL的字符串。这会导致模型中出现大量重复(甚至单元测试中会出现更多重复),但我不确定如何让它更DRY。我能想到几个可能的方向...按照“validates_url_format_of”插件,但这只会让验证干给这个特殊的字符串它自己的模型,但这看起来很像重溶液为这个特殊的字符串创建一个ruby​​类,但是我如何得到ActiveRecord关联这个类模型

  2. ruby - 在 Ruby 中按名称传递函数 - 2

    如何在Ruby中按名称传递函数?(我使用Ruby才几个小时,所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁?我可以只

  3. ruby-on-rails - 应用程序的名称是否可以作为变量使用? - 2

    当我创建一个Rails应用程序时,控制台:railsnewfoo我的代码可以使用字符串“foo”吗?puts"Yourapp'snameis"+app_name_bar 最佳答案 Rails.application.class将为您提供应用程序的全名(例如YourAppName::Application)。从那里您可以使用Rails.application.class.parent获取模块名称。 关于ruby-on-rails-应用程序的名称是否可以作为变量使用?,我们在StackOve

  4. ruby-on-rails - 如何从过时的 TZInfo 标识符中获取 Rails TimeZone 名称? - 2

    已经有一个问题回答了如何将“America/Los_Angeles”转换为“PacificTime(US&Canada)”。但是我想将“美国/太平洋”和其他过时的时区转换为RailsTimeZone。我无法在图书馆中找到任何可以帮助我完成此任务的东西。 最佳答案 来自RailsActiveSupport::TimeZonedocs:TheversionofTZInfobundledwithActiveSupportonlyincludesthedefinitionsnecessarytosupportthezonesdefinedb

  5. ruby-on-rails - 如何在 Rails 中设置路由的默认格式? - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式,每行不带“默认值”散列?谢谢。

  6. ruby-on-rails - environment.rb 中设置的常量在开发模式中消失 - 2

    了解Rails缓存如何工作的人可以真正帮助我。这是嵌套在Rails::Initializer.runblock中的代码:config.after_initializedoSomeClass.const_set'SOME_CONST','SOME_VAL'end现在,如果我运行script/server并发出请求,一切都很好。然而,在我的Rails应用程序的第二个请求中,一切都因单元化常量错误而变得糟糕。在生产模式下,我可以成功发出第二个请求,这意味着常量仍然存在。我已通过将以上内容更改为以下内容来解决问题:config.after_initializedorequire'some_cl

  7. ruby - 在 Ruby 中动态创建数组 - 2

    有没有办法在Ruby中动态创建数组?例如,假设我想遍历用户输入的书籍数组:books=gets.chomp用户输入:"TheGreatGatsby,CrimeandPunishment,Dracula,Fahrenheit451,PrideandPrejudice,SenseandSensibility,Slaughterhouse-Five,TheAdventuresofHuckleberryFinn"我把它变成一个数组:books_array=books.split(",")现在,对于用户输入的每一本书,我想用Ruby创建一个数组。伪代码来做到这一点:x=0books_array.

  8. ruby-on-rails - rails : check if the model was really saved in after_save - 2

    ActiveRecord用于在每次调用保存方法时调用after_save回调,即使模型没有更改并且没有生成插入/更新查询也是如此。这实际上是默认行为。在大多数情况下这没问题。但是一些after_save回调对模型是否实际保存的事情很敏感。有没有办法确定模型是否实际保存在after_save中?我正在运行以下测试代码:classStage 最佳答案 ActiveRecordusetocallafter_savecallbackeachtimesavemethodiscalledevenifthemodelwasnotchangedan

  9. ruby - 是否可以将 IRB 提示配置为动态更改? - 2

    我想在IRB中浏览文件系统并让提示更改以反射(reflect)当前工作目录,但我不知道如何在每个命令后进行提示更新。最终,我想在日常工作中更多地使用IRB,让bash溜走。我在我的.irbrc中试过这个:require'fileutils'includeFileUtilsIRB.conf[:PROMPT][:CUSTOM]={:PROMPT_N=>"\e[1m:\e[m",:PROMPT_I=>"\e[1m#{pwd}>\e[m",:PROMPT_S=>"FOO",:PROMPT_C=>"\e[1m#{pwd}>\e[m",:RETURN=>""}IRB.conf[:PROMPT_MO

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法? - 2

    我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐