AngularJS radio單選按鈕

阿新 • • 發佈：2019-01-02

今天在看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>

這裡寫圖片描述

AngularJS radio單選按鈕

今天在看angularJS的API時，看到一個例項。在頁面上有幾個專案名稱，每個名稱前面都有一個checkbox，如果打上勾，則表示這個專案已經完成，如果沒有打鉤，則表示未完成。然後在下方設定一個輸入框，用來輸入新增加專案的名稱，再下邊是兩個radio按

angularJs 處理單選按鈕（radio）

label style eve div del inpu level blog val <label class="radio"> <input type="radio" name="level" ng-model="levelName" val

去掉radio單選按鈕的預設樣式

在實際專案中radio單選按鈕的預設樣式是很討厭的很多地方用了跟主色調不一樣很突兀我在網上查了查自己改了一個 <dd> <label> <inp

select下拉列表和 radio單選按鈕控制元件開關---- 根據值選擇選項 & change事件

select option選項 1）下拉列表根據值，選中其中一個選項：根據value值選中： $("#orientation option[value= '"+ orientation_val +"']").attr('selected',true); 根據text值選

AngularJS中單選按鈕和多選框的動態繫結

AngularJS中的單選按鈕的動態繫結十分簡單，寫法如下： <input type="radio" name="sex" value="man" ng-model="sex">男 <input type="radio" name="se

Angularjs中單選按鈕用法總結

單選按鈕，比較常用，但是，使用時，總會出現一些問題，比如點選時，獲得不了對應的值，或者單選按鈕在頁面載入時，不能預設顯示所要選擇的項等一系列問題。下面總結一下： Html頁面： <div class="btn-group"> <label ng-r

用el表示式給radio單選按鈕checked屬性賦值

<input type="radio" name="user.sex" id="male" value="男" <c:if test="${user.sex=='男'}"> checked='checked'</c:if> /> <label for="female

Android中Radio單選按鈕操作

public class MainActivity extends Activity { private RadioGroup group_temo; private RadioButton checkRadioButton; @Override pr

HTML的radio單選按鈕實現男、女性別只能選擇一個

HTML中的radio單選按鈕實現男女性別選擇，普遍邏輯肯定是隻能選擇其中一個，要實現這個功能可以在<input>標籤里加一個name屬性，並設定name屬性值相同即可！例如：<inp

JQuery統一複寫美化專案中所有radio單選按鈕樣式

#### 老專案要升級改版，對於分散在各頁面的樣式不好處理，怕有遺漏，尤其是優化input表單，修改其預設樣式，接下來，我將給大家分享一下，我在專案中的總結。 **效果** ![](https://img2020.cnblogs.com/blog/1238759/202012/1238759-2020121

jquery判斷單選按鈕radio是否選中的方法

type 兩種方法 article cti 頁面 html query his on() 這篇文章主要介紹了jquery判斷單選按鈕radio是否選中的方法,實例分析了加載頁面時獲取單選按鈕ID和點擊按鈕時獲取單選按鈕ID兩種方法,非常簡單實用,需要的朋友可以參考下

jquery獲取單選按鈕radio的值

1，簡單寫就是： var val== $('input[name="sex"]:checked').val(); 2,話不多說直接上程式碼：記得引入jquery就可以了 <!DOCTYPE html> <html lang="en"> <head>

js javascript 根據後臺的值預設選中單選按鈕,radio,單選預設值,單選扭預設

js javascript 根據後臺的值預設選中單選按鈕,radio,單選預設值,單選扭預設 <html> <head> <title>初始化單選</title> <script>

單選按鈕radio-CSS樣式

重寫radio單選框選中按鈕然後觸發其他事件

首先編寫下面日期資訊對應的程式碼如下 <input type="hidden" name="fdLoop" id="fdLoop" value="3" />  <input type="radio" name="rdL

使用easyui框架form控制元件，單選按鈕radio或複選框checkbox樣式問題

easyui只提供了textbox文字框，未提供單選按鈕radio或複選框checkbox控制元件，在使用過程中，會存在單選按鈕radio或複選框checkbox與文字框textbox樣式不統一的問題，要保證其樣式的統一性，可以通過如下程式碼實現： for

angularJs裡單選框radio怎麼使用ng-model？

使用ng-model和ng-value ng-mode是當前選中的值,， ng-value是這個radio的值。使用ng-model把radio綁到一個變數上，ng-value使用表示式來表示值。選中時它的值就是ng-value的值了。測試程式碼如

VC單選按鈕控制元件(Radio Button)用法

先為對話方塊加上2個radio button，分別是Radio1和Radio2。問題1：如何讓Radio1或者Radio2預設選上？如何知道哪個被選上了？關鍵是選上，“預設”只要放在OnInitDialog()即可。三種方法可以讓它選上，第一種： ((C

Struts2單選按鈕標籤s:radio的使用及其設定預設值

首先在頁面中引入struts標籤庫： <%@ taglib prefix="s" uri="/struts-tags"%> 在JSP頁面中建立單選按鈕radio的方法： <s:radio list="#{'1':'先生','0':'女士'}" n

jQuery獲取迴圈中的選中單選按鈕radio的值

1.<input type="radio" name="testradio" value="jquery獲取radio的值" />jquery獲取radio的值 2.<input type="radio" name="testradio" value="jquery獲取checkbox的值

AngularJS radio單選按鈕

相關推薦