AngularJS radio单选按钮_ng radio-优快云博客

本文链接：https://blog.youkuaiyun.com/lp_frank/article/details/44601283

这篇博客介绍了一个AngularJS的应用实例，涉及如何在页面上创建带有复选框的项目列表，用户可以标记项目为已完成或未完成。此外，还包含一个输入框用于添加新项目，以及一组Radio按钮来设定新项目的完成状态。最后，通过提交按钮添加新项目。内容重点讲解了AngularJS代码的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在看angularJS的API时，看到一个实例。

在页面上有几个项目名称，每个名称前面都有一个checkbox，如果打上勾，则表示这个项目已经完成，如果没有打钩，则表示未完成。

然后在下方设置一个输入框，用来输入新增加项目的名称，再下边是两个radio按钮，只能选择一个，用来选择新增肌的项目的完成情况。最后是一个提交按钮，表示添加一个新的项目。

这里写图片描述
这是截图。

下面来看看angularJS的代码。

<!DOCTYPE html>
<html ng-app="todolist">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/angular.js"></script>

</head>
<body>
<div ng-controller="TodolistController">
    <ul>
        <!--循环遍历作用域下的items，即（$scope.items），并重复克隆这个HTML元素li-->
        <li ng-repeat="item in items">
            <!--当checkbox绑定的值为true时，页面中会打上对勾-->
            <input type="checkbox" ng-model="item.finished"><span ng-bind="item.name"></span>
        </li>
    </ul>
    <hr>
    <!--绑定作用域对象的一个数据模型name，这个那么变量随时获取输入框输入的内容-->
    Name:<input type="text" ng-model="name">

    <p></p>
    <label>
        <!--
        有两个radio标签，必须有相同的name才能实现二选一的效果
        通过ng-value里不同的值，实现选择不同radio有不同值。然后两个radio又绑定着相同的数据模型，这样就可以实现当选择不同的radio时，绑定的数据模型变量会有不同的值。
        -->
        <input type="radio" ng-value=true ng-model="state" name="selectState">finished
    </label>
    <label>
        <input type="radio" ng-value=false ng-model="state" name="selectState">unfinished
    </label>

    <!--这里是把这个数据模型显示出来，为了测试其值是否正确。可以省略掉-->
    <p>{{state}}</p>
    <!--当点击按后，执行一个函数-->
    <button type="button" ng-click="addItem()">Add a new item</button>
</div>

<script>
    //先预定义几个项目的名称和完成的状态。
    var items = [
        {name: 'Javascipt', finished: true},
        {name: 'AngularJS', finished: true},
        {name: 'NodeJS', finished: false},
        {name: 'MongoDB', finished: false}
    ];
    //注册一个模块
    var todolistModule = angular.module('todolist', []);
    //注册一个控制器
    todolistModule.controller('TodolistController', ['$scope', function ($scope) {
        //把外围的是对象数组的引用传递给模块作用域的数据模型items中
        $scope.items = items;
        //把输入框的内容初始化为空
        $scope.name = '';
        //给作用域添加函数方法
        $scope.addItem = function () {
            //因为将来要插入的都是对象，所以先定义一个空的对象
            var newItem = {};
            //分别把DOM中绑定的值赋给这个新定义对象的两个属性
            newItem.name = $scope.name;
            newItem.finished = $scope.state;
            //在数组的末尾追加对象元素
            items.push(newItem);
        };
    }]);
</script>
</body>
</html>

这里写图片描述