2. 程式人生 > >angularJs裡單選框radio怎麼使用ng-model？

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

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

使用ng-model和ng-value

ng-mode是當前選中的值,， ng-value是這個radio的值。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>radio的繫結</title>
    <script src="angular.js">
 
</script>
</head>

<body ng-app="app">
    <div ng-controller="appCon">
        <form ng-submit="ok()">
            <div>
                <input type="radio" name="a" ng-value="a" ng-model="c">11 <input type="text" ng-model="a">
                <input
 
 type="radio" name="a" ng-value="b" ng-model="c">22<input type="text" ng-model="b">
            </div>
            <h1>{{c}}<h1>
            <input type="submit" value="submit">
        </form>
    </div>

    <script>

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

    app.controller('appCon', function($scope,$log) {

       $scope.ok = function(){
        $log.log($scope.c);
       }
    });
    </script>
</body>

</html>

這裡可以列印下 $scope.c 會發現，它的是你選的選項了。或者直接寫頁面上看看。

相關推薦

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

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

angularjs的單選框+ng-repeat的實現

最近在做專案的過程中，要求做一個考試系統，在答題頁面涉及到單選框+ng-repeat來實現試卷的展示，做完後將答案傳到後臺，在這裡主要講下單選框+ng-repeat的幾個要點 前臺程式碼如下： <div class="container" width="1900px"

js獲取單選框裡面的值

  <script> window.onload = function(){ //通過名字獲取 getElementsByName //var obj = document.getElementsByName("fruit"); //通過標籤獲取 getElements

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

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

AngularJS單選框及多選框實現雙向動態繫結

在AngularJS中提及雙向資料繫結，大家肯定會想到ng-model指令。 一、ng-model ng-model指令用來將input、select、textarea或自定義表單控制元件同包含它們的作用域中的屬性進行繫結。它將當前作用域中運算表示式的值

angularjs ng-repeat單選框和下拉框的實現

單選框 見以下程式碼： <div class="form-group " > <label class="col-sm-2 control-label"&

單選框，復選框

單選 一個 div bsp style checked 學習java inpu radi 1、分組即，多個單選框，都在一個分組裏，同一時間，只能選中一個單選框 設置name屬性相同即可<p>今天晚上做什麽？</p> 學習java<in

js自定義修改復選框單選框樣式，清除復選框單選框默認樣式

radio 技術分享 b2c 如果 watermark css 狀態 初始化 -a 之前做項目的時候，也遇到過需要按照設計稿把<input type="checkbox">和<input type="radio">的默認樣式進行修改，但發現，並沒有可

angularJs 處理單選按鈕（radio）

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

學習15 單選框/多選框標簽

con form type code pan content 多選 span div <!doctype html> <html> <head> <meta http-equiv="content-type" content="t

jquery 根據後臺傳過來的值動態設置下拉框、單選框選中

url selected ros info fun cte blog font function jquery 根據後臺傳過來的值動態設置下拉框、單選框選中 1 $(function(){ 2 var sex=$("#sex").val(); 3

單選框，多選框樣式

單選 har bsp spl enter log ott min right 主要註意before和after的樣式設置，input要設置id，label要設置for值並且等於相應的input值的id HTML <!DOCTYPE html><html&

單選框 復選框

nbsp img height mar info valid idt def ova 一. #!/usr/bin/env python # -*- coding:utf-8 -*- from django.core.exceptions import Valid

CSS學習筆記三：自定義單選框，復選框，開關

sla checked 移動 transform 第一個 16px 位移 block back 一點一點學習CCS，這次學習了如何自定義單選框，復選框以及開關。 一、單選框 1、先寫好body裏面的樣式，先寫幾個框 1 <body> 2 <d

JQuery單選框設置選中

dom true ttr val tro select sel 使用 jquery 使用$(selector).val(‘value‘).attr(‘checked‘,true),會導致DOM上所有的單選/復選的value都會變成 value 解決辦法：使用 $（“【nam

vue.js實現單選框、復選框和下拉框

new type 方式 避免 -- js實現 處理 scrip 按鈕 Vue.js可以很方便的實現數據雙向綁定，所以在處理表單，人機交互方面具有很大的優勢。下邊以單選框、復選框和下拉框為例介紹他們在HTML和Vue.js中的具體實現方式。 一、單選框 在傳統的HTML

自定義單選框，復選框樣式

round absolut ima tex utf-8 play col 樣式 bsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

自定義單選框選中

blog rem scl script ext class 代碼 pan pos jq代碼 <script type="text/javascript"> $(function(){ $(".J_check").on(‘

吾八哥學Selenium(三)：操作復選框checkbox/單選框radio的方法

attr webdriver for in tex 如果 Go 測試的 har selected 復選框checkbox和單選框radio是web網站裏經常會使用到的兩個控件，那麽在web自動化測試的時候如何利用Selenium來操作這倆控件呢？今天我們就來簡單入門練習一下

javascript原生代碼取單選框的值

checked undefine efi asc doc element 選擇 elements 好用 網上搜索到的，項目中正好用到，先記下來，以後直接從自己的博客上復制粘貼！！！ //取單選框選擇中的值，傳入單選框的name function getR