需要默认选择 Angular JS 单选按钮

2023-11-21

我是 Angular JS 的新手,我正在尝试创建一组单选按钮。创建按钮是很容易的部分,但我在弄清楚如何默认选择其中一个而不破坏所有内容时遇到问题。我已经在 Angular 文档和多个其他 stackoverflow 问题中阅读了有关使用 ngChecked 的内容,但似乎仍然不太明白。

我需要做的是当用户访问该页面时预先选择描述之一。价格、折扣和 deal_value 还需要与预选的 Price_option 对象中的值一起显示。

这是我试图开始工作的代码:http://jsfiddle.net/qWzTb/311/

HTML 代码:

<body ng-app="demoApp">
    <div ng-controller="DemoController" ng-init="init([{qty: 1, price:10, qty_description:'descrip 1', discount:'1%', deal_value:200}, {qty: 2, price:7, qty_description:'descrip 2', discount:'5%', deal_value:100}])">  

       <div>
           <label ng-repeat="price_option in price_options">
              <input type="radio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/>
              {{ price_option.qty_description }}
           </label>
           <ul>
              <li>{{ init.price_option.price }}</li>
              <li>{{ init.price_option.discount }}</li>
              <li>{{ init.price_option.deal_value }}</li>
           </ul>
        </div>
    </div>
</body>

JavaScript:

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.init = function(prices) {
    $scope.price_options = prices;
    $scope.selected_price_option = $scope.price_options[0];
  };
});

HTML

<body ng-app="demoApp">
    <!-- ng-init functionality belongs in controller -->
    <div ng-controller="DemoController">
        <!-- move ng-repeat to container div instead of label -->
        <div ng-repeat="price_option in price_options">
            <label>
                <!-- the model is the scope variable holding the selected value -->
                <!-- the value is the value of this particular option -->
                <input type="radio" ng-model="$parent.selected_price_option" ng-value="price_option" name="quantity" />{{price_option.qty_description}}</label>
            <ul>
                <li ng-bind="price_option.price"></li>
                <li ng-bind="price_option.discount"></li>
                <li ng-bind="price_option.deal_value"></li>
            </ul>
        </div>
    </div>
</body>

JS

angular.module('demoApp', []).
controller('DemoController', function ($scope) {
    //moved init logic to controler
    $scope.price_options = [{
        qty: 1,
        price: 10,
        qty_description: 'descrip 1',
        discount: '1%',
        deal_value: 200
    }, {
        qty: 2,
        price: 7,
        qty_description: 'descrip 2',
        discount: '5%',
        deal_value: 100
    }];
    $scope.selected_price_option = $scope.price_options[1];
});

叉形小提琴:http://jsfiddle.net/W8KH7/2/

或者您可以使用对象策略来避免引用 $parent:http://jsfiddle.net/W8KH7/3/

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

需要默认选择 Angular JS 单选按钮 的相关文章

随机推荐

  • Lucene 5.0 中按字母顺序对字符串字段进行排序

    我在 Lucene 5 0 中对字符串字段进行排序时遇到问题 显然 自 Lucene 4 以来排序的方式已经改变 下面显示了正在为我的文档建立索引的一些字段的片段 Override public Document generateDocum
  • 使用 Linq 重叠两个日期之间的记录

    在我的应用程序中 用户可以委托另一个用户批准订单 我需要验证的是 没有循环引用 所以如果User A是已委托User B在一定时期内 User B不能委托User A对于该期间内的任何时间 即存在重叠 日期dd mm yyyy Delega
  • 如何从 Java 密钥库中的证书链中仅删除一个证书

    我有一个 Tomcat 服务器 其 HTTPS 证书链存储在 Java 密钥库中 该链包含自签名根 CA 证书 虽然这显然没问题TLS 规范 一些验证服务对此发出警告 并且最好还是把它关掉 如何编辑密钥库以仅删除自签名根 CA 证书 但保持
  • 如何将模块路径添加到python?

    我尝试构建 V8 javascript 引擎 当我尝试调用命令时python build git v8 我收到错误 File build gyp v8 line 48 in lt module gt import gyp ImportErr
  • webrtc和peerjs:如何选择H264而不是vp8?

    我确实使用peerjshttps peerjs com在 2 个对等点之间建立连接 有没有办法强制使用 H264 代码而不是 VP8 Regards Update 您可以使用设置编解码器首选项一旦浏览器支持 即可达到相同的结果 旧答案 您必
  • Perl:具有共享多维哈希的线程

    我正在尝试在多个线程上共享多维哈希 这个哈希保存了2个连接的密钥对 我需要知道它们是否已经连接 如果没有 我需要连接它们 如果没有 则不需要去数据库 use threads use threads shared my FLUobject2p
  • jquery getJSON函数计时问题

    我认为我的程序正在跳过 JSON 调用的结果 是否可以在此处创建一个闭包函数或让程序等待 JSON 调用返回 function username not duplicate username var function name get us
  • 我可以将图像转换为 CSS3 吗? [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 假设我有一个像这样的多边形图像PNG文件 没有边框 形状填充一种颜色 没有渐变 图像背景是透明的 http www enchantedlearnin
  • 拖放后将 RecyclerView 项存储在 SQLite 中的新位置

    我有一个二维ArrayList类型的String这是适配器类的输入RecyclerView 列表中的数据每次都从 SQLite 数据库中获取onResume 叫做 我已经实现了拖放功能和onMove 成功交换列表元素的函数 但是 我需要先存
  • CKEditor 5 显示视频元素,但插入 div 中的纯 HTML 不显示该元素

    我正在创建一个课程编辑器 用户可以编辑内容 文本 视频 链接 图像等 或查看最终结果 渲染的 html 编辑器工作正常 但是当我显示渲染的 html 时 链接的 YouTube 视频不可见 这是编辑器部分 您可以看到链接的视频可见 这是 渲
  • Mathematica 中 == 和 === 的区别

    我的印象是 是一个作业 是数字比较 并且 是一个符号比较 以及在其他一些语言中 being equal to and being identical to 然而 看看下面的内容 情况似乎不一定如此 In x x Out True In x
  • 如何使用 Content-MD5 将对象放入 s3

    我尝试使用 boto3 将 XML 文件上传到 S3 根据亚马逊的建议 我想发送数据的 Base64 编码 MD5 128 位摘要 Content MD5 https docs aws amazon com AmazonS3 latest
  • Laravel 与 Docker 连接 MySQL 的问题

    我使用 Docker 设置 Laravel 的步骤 在我的本地系统中 我没有安装 PHP Composer Apache MySQL phpMyAdmin 等 我的系统中只安装了 Git 和 Docker 克隆https github co
  • xdebug.start_start_with_request=yes 如果调试客户端未侦听,则不会出现错误

    我曾经对 Xdebug 2 有以下配置 xdebug default enable 1 当没有调试客户端正在侦听时 Xdebug 不会减慢执行速度 但是当我需要调试某些内容时 我只需在 PhpStorm 中启用侦听并刷新页面即可 为此不需要
  • 如何使用 SwiftUI 和组合检测日期选择器的值变化?

    在使用 SwiftUI 和合并时 如何检测日期选择器值的变化 每当移动日期选择器轮时 我需要调用一个方法 以更新文本和滑块 我已经寻找了特定的方法来识别值的变化 使用 UIKit 可以将操作与事件关联起来 但显然我没有在文档中找到任何有用的
  • 为什么 hibernate 执行两个查询来急切加载 @OneToOne 双向关联?

    我有一个实体 A 它有一个 B 实体 而 B 有一个带有 OneToOne 双向关联的 A 现在 当我找到所有 A 记录时 hibernate 会在 B 上使用左外连接执行两个查询 如下所示 select a id a id b a fie
  • 使用 PHP 和 C# 进行 Mcrypt 和 Base64

    我在两个平台上编写了相同的方法 我相信这应该会产生相同的结果 但它没有发生 我用相同的密钥加密了相同的文本 但结果不同 有人能弄清楚为什么会发生吗 String 这是测试 Key 1234567812345678 PHP加密字符串 ybUa
  • R随机将数据分成两部分

    我试图将我的数据框随机分成两部分 例如 我想将随机 70 的数据放入一个数据框中 将另外 30 的数据放入另一个数据框中 有没有快速的方法来做到这一点 原始数据帧中的行数超过 800000 我尝试使用 for 循环 从行数中选择一个随机数
  • 在特定位置截断 UILabel

    我使用表格视图显示书籍列表 其中每个单元格都有一个UILabel显示书名和另一本书UILabel显示该书的作者 我的问题是关于作者标签的 一本书可以有多个作者 我希望它的行为如下 如果书只有一位作者 约翰 科尔曼 标签应为 约翰 科尔曼 如
  • 需要默认选择 Angular JS 单选按钮

    我是 Angular JS 的新手 我正在尝试创建一组单选按钮 创建按钮是很容易的部分 但我在弄清楚如何默认选择其中一个而不破坏所有内容时遇到问题 我已经在 Angular 文档和多个其他 stackoverflow 问题中阅读了有关使用