将 Ng-Model 绑定到 Angular 中的单选按钮列表

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

将 Ng-Model 绑定到 Angular 中的单选按钮列表

作者：迹忆客最近更新：2023/04/11 浏览次数：

当网页用户从多个选项中选择一个项目时，在选项列表下重新显示所选项目有助于用户理解他的选择。这使用户能够轻松地转到网页上的下一件事。

开发电子商务网站时，诸如此类的 Angular 功能非常理想。为了让网站显示所选项目，我们将看看使用 ng-model 来执行此功能。

ng-model 可以绑定到网页上的单选按钮列表，我们将学习两种不同的方法来执行这些功能。

使用带有 $scope 函数的 ng-model 将 ng-model 绑定到 Angular 中的单选按钮列表

这个简单的例子将在 index.html 中定义 ng-model。 HTML 代码将如下所示。

HTML 代码

<!DOCTYPE html>
<hmtl ng-app="testApp">
<head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
        code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<body ng-controller="testController">
    <form>
        <div ng-repeat="option in occurrenceOptions track by $index">
            <input type="radio" name="occurrences" ng-value="option"
            ng-model="model.selectedOccurrence" />
            <label>{{ option }}</label>
        </div>
    </form>
    <div>The selected value is : {{ model.selectedOccurrence }}</div>
</body>

然后，在 script.js 文件中，我们在控制器中运行 $scope 函数。 $scope 有助于将控制器绑定到我们为 ng-model 执行编码的 HTML。

JavaScript 代码

(function () {
    var app = angular.module('testApp', []);

    app.controller('testController', function($scope) {
        $scope.occurrenceOptions = [];

        $scope.occurrenceOptions.push('previous');
        $scope.occurrenceOptions.push('current');
        $scope.occurrenceOptions.push('next');

        $scope.model = {};
        $scope.model.selectedOccurrence = 'current';
    });
}());

使用带有此函数的 ng-model 将 ng-model 绑定到 Angular 中的单选按钮列表

这个例子和前面的显着区别是我们在控制器中声明了这个函数，基本上取代了 $scope 函数。

我们稍微改变了 index.html 的 ng-repeat 方面，它看起来像下面的代码。

HTML 代码

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <script data-require="angularjs@1.5.5" data-semver="1.5.5" src="https://
    code.angularjs.org/1.5.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>
<body ng-controller="testController as vm">
    <form>
    <div ng-repeat="option in vm.occurrenceOptions">
        <input type="radio" name="occurrence" ng-value="option" ng-model="vm.
            selectedOccurrence" />
        <label>{{ option }}</label>
    </div>
    </form>
    <div>The selected value is : {{ vm.selectedOccurrence }}</div>
</body>

然后，在 script.js 中，我们在控制器中声明 this 函数。

JavaScript 代码

(function () {
    var app = angular.module('testApp', []);

    app.controller('testController', function () {
        var vm = this;
        vm.occurrenceOptions = [];

        vm.occurrenceOptions.push('previous');
        vm.occurrenceOptions.push('current');
        vm.occurrenceOptions.push('next');

        vm.selectedOccurrence = 'current';
    });
})();