使用 AngularJS 将选择重置为默认值

2024-04-23

我有一个关于 AngularJS 的问题。我有一个 使用 ngOptions 创建的选项进行选择。我想要 将所选选项设置回默认选项。我尝试过了 删除模型变量,例如:

if(angular.isDefined($scope.first)){
    delete $scope.first;
}

但这不起作用。这是我的 html。

    <div ng-app="app">
        <div ng-controller="testCtrl">
            <select data-ng-model="first"  data-ng-options="item.name for item in selectContent" required="required">
              <option value="" style="display: none;">-- select --</option>
            </select>
            {{first.value}}
<hr/>
        <input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
        </div>
    </div>

这是我的 JavaScript 代码:

angular.module('app', []).controller('testCtrl', function ($scope) {
    $scope.selectContent = [
        {
            name: "first",
            value: "1"
        },
        {
            name: "second",
            value: "2"
        }
    ];

    $scope.resetDropDown = function() {
        if(angular.isDefined($scope.first)){
            delete $scope.first;
        }
    }
});

这是工作中的 jsfiddle:

http://jsfiddle.net/zono/rzJ2w/ http://jsfiddle.net/zono/rzJ2w/

我该如何解决这个问题?

此致。


您的重置按钮位于包含控制器的 div 之外。这意味着您的重置功能在您尝试使用它的上下文中不存在。

改成:

<div ng-app="app">
    <div ng-controller="testCtrl">
        <select data-ng-model="first"  data-ng-options="item.name for item in selectContent" required="required">
          <option value="" style="display: none;">-- select --</option>
        </select>
        {{first.value}}
        <hr/>
        <input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
    </div>
</div>

使用调试器来确保您尝试修复的代码实际上正在执行总是一个好主意。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 AngularJS 将选择重置为默认值 的相关文章

  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • 如何处理并不总是返回承诺的函数?

    处理函数并不总是返回 Promise 的情况的最佳方法是什么 我的实际代码太复杂 无法解释 但问题的本质归结为检查条件 根据它 我要么返回一个局部变量 要么需要发送一个 ajax 请求 像这样的事情 function example val
  • angularjs:如何向资源对象添加缓存?

    在 http 中添加缓存非常简单 通过传递cache true http docs angularjs org api ng http https docs angularjs org api ng service 24http有缓存选项
  • Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

    我使用 Angular ui 的 select2 来实现相当简单的下拉菜单 它由位于我的控制器范围内的静态数据数组支持 在我的控制器中 我有一个在下拉列表的 ng change 上调用的函数 以便我可以在值更改时执行一些操作 然而 我发现
  • 如何在 JSFiddle 中链接外部 json 文件?

    我有一个很长的 json 文件country json name WORLD population 6916183000 name More developed regions population 1240935000 name Less
  • 在 Braintree 中使用 AngularJS 加密信用卡详细信息

    我正在使用 Braintree 作为支付网关 但遇到了一个问题 我正在发送信用卡信息和其他用户详细信息 出于安全目的 信用卡信息必须进行加密 Braintree 对此进行了加密 包括以下内容 braintree onSubmitEncryp
  • 如何理解 Angular JS 中的控制台错误消息?有什么工具吗?

    我是 Angular JS 的新手 我的第一个问题是如何理解 Angular JS 中控制台的错误消息 我编写了这段用于匹配密码的代码片段 它在控制台上抛出错误 但它工作正常 它是有线的 我无法从这些控制台消息中理解任何内容 谁能指出我为什
  • 用数组反向查找对象

    假设我有一个这样的对象 resourceMap a 0 1 2 3 4 5 6 7 8 9 10 b 11 12 c 21 23 d 54 55 56 57 510 确定是否的最佳方法是什么resourceId 21将会 c 我们不知道钥匙
  • 使用谷歌分析处理带有哈希#的网址

    我正在使用 javascript 客户端 mvc 开发一个 js 单页 Web 应用程序 在本例中为 angular js 我在网站上添加了谷歌分析 但从目前我所看到的 至少是实时的 来看 谷歌没有考虑哈希后的 uri 部分 那就是我有一个
  • 在多个 angular.js 应用程序之间共享单个服务

    我正在构建一个电子商务网站 基于 shopify 并且使用多个小型 angularjs 应用程序来处理诸如快速购物车 愿望清单 过滤产品和其他一些较小项目之类的事情 我最初使用了一个大型应用程序 具有路由和所有内容 但当我没有完整的 RES
  • AngularJS 无限滚动大量数据

    所以我尝试使用 AngularJS 创建一个无限滚动表 类似于 http jsfiddle net vojtajina U7Bz9 http jsfiddle net vojtajina U7Bz9 我遇到的问题是 在 jsfiddle 示
  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件
  • Typescript 中的 Angular 服务具有依赖注入和缩小功能

    我现在正在努力让我的头脑围绕 Angularjs 我目前正在寻找服务 我也使用打字稿来编写代码 现在 从网络上的示例中 我看到人们在打字稿中使用如下所示的服务 class Service constructor private http n
  • 对角度“数据表”中的列进行排序

    我创建了表 table class table table striped table bordered table hover width 100 thead tr th Nannie ID th th Name th th Last n
  • 为什么 html 中的 AngularJS 错误没有显示在控制台中?

    Here s a fiddle http jsfiddle net 6y7odxmj 3 用于说明 当 ng click 指令 例如 调用未在控制器的 scope 或其父级 上定义的函数时 它会默默地失败 当我尝试调试网页时 这种行为令人抓
  • 如何在没有数学库的情况下在 JavaScript 中截断小数?

    我需要数字只有 2 位小数 如金钱 我使用的是 Number parseFloat Math trunc amount to truncate 100 100 但我不能再支持数学库 在没有数学库并且不四舍五入小数的情况下如何实现这一目标 您
  • $index 中的 AngularJS 数字

    举例来说 我有以下代码 伪 div index div 结果将是 1 2 3 4 5 6 我怎样才能改变上面的代码以便打印索引 001 002 003 004 005 006 以便索引打印为 3 位数字 您可以使用过滤器轻松完成此操作 首先
  • Karma 测试报告运行速度快,但实际上运行速度慢

    最好的解释是a video https youtu be Zwwi01JuPrQ 或参见下面的 gif 您会注意到 Karma 进度报告器报告测试只需要几毫秒 但显然需要相当长的时间 我在推特上提到了这一点 https twitter co
  • Angular 计算 HTML 中的百分比

    我试图在 HTML 中显示百分比值 如下所示 td myvalue totalvalue 100 td 它可以工作 但有时它会给出一个很长的小数 这看起来很奇怪 如何四舍五入到小数点后两位 有更好的方法吗 您可以使用过滤器 如下所示杰夫约翰
  • 如何从角度资源 $save() 读取响应并保留原始数据

    我是 Angular 的新手 我确信我在这里缺少一些基本的东西 我有一个对象 我将其发布到服务器来创建它 服务器返回对象 ID 我需要读取并更新客户端中的对象 服务器只会返回对象 ID 但是 在客户端 我有其他数据 当我执行回调时我无法使用

随机推荐

  • 在 Vuetify 组合框中通过 @change 传递目标元素

    我需要通过目标事件updateTags方法 这是下面的组合框 当我打电话给comboActive方法我可以获得目标事件 KeyboardEvent isTrusted true key y code KeyY location 0 ctrl
  • Chrome 中的 FileReader 内存泄漏

    我有一个具有文件上传功能的网页 上传以 5MB 块执行 我想在将每个块发送到服务器之前计算其哈希值 块表示为Blob https developer mozilla org en docs Web API Blob对象 为了计算哈希值 我将
  • 具有非规则形状的 NSTextContainer 示例?

    嗨 我正在使用新的TextKitiOS7 的 API 我正在尝试制作一个UITextView具有不规则形状 到目前为止 我在视图控制器中有 void loadView self view UIView alloc initWithFrame
  • 如何使对象 ID 易于理解?

    Storyboard 上的每个 UIView 都有一个唯一的对象 ID 如下所示 kvf NI koG 我想知道是否有一种方法可以使其更加人性化 例如 myLabel 您无法通过 Interface Builder 更改对象 ID Xcod
  • 为什么 ListView.getCheckedItemPositions() 没有返回正确的值?

    该应用程序有一个ListView启用多项选择后 它在 UI 中按预期工作 但是当我使用以下代码读取值时 Log i TAG Entered SearchActivity saveCategoryChoice SparseBooleanArr
  • Angular svg 或 canvas 使用颜色渐变

    我正在使用 Angular 和 d3 创建一个甜甜圈 在指令中 我可以非常简单地给填充区域指定颜色 在这个 plunker 中它是蓝色 但我想做的是让 SVG 平滑地改变其颜色 0 33 3 red 33 4 66 66 orange 66
  • 为什么我无法使用 Resources.getSystem() 而不会出现运行时错误?

    public class BobDatabase extends SQLiteOpenHelper private static final String DATABASE NAME bob db private static final
  • SQL 排序依据 - 硬编码值列表

    我有一个查询 其中返回记录状态列 记录状态列有几个值 例如 活动 已删除 等 我需要按 活动 已删除 等顺序对结果进行排序 我目前正在创建 CTE 来将每组记录进行 UNION ALL 是否有更好的动态方法来完成查询 谢谢你 您可以使用CA
  • TypeScript 扩展模块中的对象

    我想做的事情确实类似于this https stackoverflow com questions 12802383 extending array in typescript and this https stackoverflow co
  • ICE61:该产品应仅删除其自身的旧版本

    我正在关注第二个答案here https stackoverflow com questions 500703 how to get wix to update a previously installed version of a pro
  • underscore.js: _.throttle(函数, 等待)

    根据下划线文档 http underscorejs org throttle throttle 函数 等待 创建并返回一个新的 所传递函数的节流版本 在调用时 重复 实际上最多只会调用原始函数一次 每等待毫秒 对于速率限制事件很有用 发生的
  • 使用列表中的项目更改嵌套字典的字典中的值?

    如何根据列表的值修改 创建嵌套字典的字典中的键 值 其中列表的最后一项是字典的值 其余项冷藏到字典中的键 这将是列表 list adddress key1 key1 2 key1 2 1 value 这只会在解析命令行参数等情况下出现问题
  • 加载 DOM 后如何运行 jQuery 的后备副本?

    以下是a中的第一行代码
  • Struts2 瓷砖 org.apache.tiles.extras.complete.CompleteAutoloadTilesListener 集成错误

    我正在关注这里发布的答案 使用 struts2 tiles plugin 在图块定义中使用 OGNL 和通配符 https stackoverflow com questions 10050433 ognl and wildcards wo
  • 文本段的名称从何而来?

    传统的汇编器和更高级别的编译器使用多个内存segments 根据预期用途 因此 有数据段 堆栈段 bss 和文本段 文本段也称为代码段 Text部分 为了机器码 我问过所有我能找到的老前辈 像机器代码这样难以阅读的东西是如何被称为 文本段
  • Javascript:setTimeout() - 需要帮助

    我目前正在网页上执行突出显示功能 并为此使用 jquery 插件 我的代码如下所示 var input function var matchword searchbox val if matchword body removeHighlig
  • 当同时按下两个按钮时

    我有一个小问题 我有一个表单 这是我的登录表单 然后我还有另一个表单 这是我的添加用户表单 当我单击登录表单的登录按钮时 它需要检查是否同时按住了 Shift 和 Control 键 如果两者均未按下 则不应打开添加用户表单 但如果它们都被
  • C++ UDP Socket端口复用

    如何在 C 中创建客户端 UDP 套接字 以便它可以侦听另一个应用程序正在侦听的端口 换句话说 如何在 C 中应用端口复用 我只想监听一个端口 您可以使用嗅探器来做到这一点 只需忽略来自不同端口的数据包即可 我可能需要阻止它发送一些特定的数
  • Powershell:如何将字节字符串与二进制注册表值进行比较

    我有一个二进制注册表值 我想检查它在 Powershell 脚本中的一致性 我通过以下方式检索值 Get ItemProperty Path HKLM Software ORL WinVNC3 Name ACL ACL 这将返回一个字节字符
  • 使用 AngularJS 将选择重置为默认值

    我有一个关于 AngularJS 的问题 我有一个 使用 ngOptions 创建的选项进行选择 我想要 将所选选项设置回默认选项 我尝试过了 删除模型变量 例如 if angular isDefined scope first delet