单选框及多选框的双向动态绑定,AngularJS单选框

2019-09-02 15:55 来源:未知

在AngularJS中谈到双向数据绑定,大家自然会想到ng-model指令。

AngularJS 在 <input type="text" /> 中贯彻双向动态绑定十一分回顾,如下所示:

一、ng-model

<input type="text" ng-model="topic.title" />

ng-model指令用来将input、select、textarea或自定义表单控件同包括它们的功用域中的属性进行绑定。它将日前功用域中运算表明式的值同给定的成分实行绑定。要是属性荒诞不经,它会隐式创立并将其增添到当前作用域中。
始终用ng-model来绑定scope上二个数据模型内的性质,并非scope上的习性,那足以幸免在效能域或后代效用域中产生属性覆盖!

只须求用ng-model 与 $scope 中的属性对应,即落到实处了type=”text” 的双向动态绑定。当 <input type="radio" /> 及 <input type="checkbox" /> 时场合略有差异:

<input type="text" ng-model="modelName.somePrototype" />

1. <inputtype="radio" />

二、type=”radio”

<input type="radio" name="person-action" value="go_home" ng-model="person.action" />回家 
<input type="radio" name="person-action" value="go_to_school" ng-model="person.action" />回学校 

因此 value 属性钦赐选中状态下相应的值,并通过 ng-model 将单选框与 $scope 中的属性对应,便实现了 type=”radio” 时的双向动态绑定。

经过 value 属性钦命选中状态下相应的值,并透过 ng-model 将单选框与 $scope 中的属性对应,便完成了 type=”radio” 时的双向动态绑定。

<input type="radio" name="sex" value="male" ng-model="person.sex" />男
<input type="radio" name="sex" value="female" ng-model="person.sex" />女

2. <input type="checkbox" />

三、type=”checkbox”

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_sound" />铃声 
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_vibrate" />震动 
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="phone.play_lights" />呼吸灯 

因此AngularJS 的内置指令 ng-true-value 和 ng-false-value ,钦点多选框在当选和未当选状态下相应的值,再经过ng-model 将其与 $scope 中的属性对应,便完成了type=”checkbox” 的双向动态绑定。

因此AngularJS 的内置指令 ng-true-value 和 ng-false-value ,钦赐多选框在当选和未当选状态下相应的值,再经过ng-model 将其与 $scope 中的属性对应,便完结了type=”checkbox” 的双向动态绑定。

<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
<input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球

然则精粹跟实际总是相差太多,在实操进度中要么出现了难点。应该是ng-repeat中scope成效域的主题素材。

四、完整示例

经过一番物色、调节和测验,本人到底将此主题材料化解了,效果图如下:

<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>radio & checkbox</title>
  <script type="text/javascript" src="angular.js/1.4.4/angular.min.js"></script>
</head>
<body>
  <input type="radio" name="sex" value="male" ng-model="person.sex" />男
  <input type="radio" name="sex" value="female" ng-model="person.sex" />女
  <input type="text" ng-model="person.sex" />

  <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.pingpong" />乒乓球
  <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.football" />足球
  <input type="checkbox" ng-true-value="true" ng-false-value="false" ng-model="person.like.basketball" />篮球
  {{ person.like.pingpong }} {{ person.like.football }} {{ person.like.basketball }} 
</body>
</html>

<script type="text/javascript">
  var app = angular.module('myApp', []);
  app.run(function($rootScope) {
    $rootScope.person = {
      sex: "female",
      like: {
        pingpong: true,
        football: true,
        basketball: false
      }
    };
  });
</script>

图片 1

以上正是有关AngularJS单选框及多选框达成双向动态绑定的有关介绍,希望对大家的就学抱有扶助。

着力源码

您恐怕感兴趣的篇章:

  • vue.js删除动态绑定的radio的钦定项
  • vue.js选中动态绑定的radio的钦定项
  • AngularJS 单选框及多选框的双向动态绑定
  • 详解Vue.js动态绑定class
  • AngularJS动态绑定HTML的方式深入分析
  • Chrome扩大页面动态绑定JS事件提醒错误
  • Javascript动态绑定事件的简易完成代码
  • js循环动态绑定带参数函数境遇的标题及缓慢解决方案[转]
  • javascript下动态this与动态绑定实例代码
  • JavaScript动态绑定详解

js

var str = ""; // 原来存放选中的项 
$scope.Selected = false; //默认未选中 
var choseArr=[]; // 定义数组用于存放前端显示 
$scope.check = function(z,x){ 
console.log("HUY:"); 
console.log(z); 
console.log("HUYU:"); 
console.log(x); 
if (x == false) { // 选中 
   str = str + z + ','; 
  } else { 
   str = str.replace(z + ',', ''); // 取消选中 
  } 
  choseArr = (str.substr(0,str.length-1)).split(','); 
 console.log("HY:"); 
 console.log(choseArr); 
 $scope.number_request = choseArr.length; // 前端显示所选数量 
 $scope.content_request = choseArr; // 前端显示所选请求ID 
}; 

Html

<tr ng-repeat="item in querydata"> 
<td ng-bind="$index+1">1</td> 
 <td><a ui-sref="#">{{item.postid}}</a></td> 
  <td>{{item.medname}}</td> 
  <td>{{item.medfact}}</td> 
  <td>{{item.medcnt}}</td>  
  <td>{{item.remark}}</td>   
  <td>{{item.tel}}</td>   
  <td>{{item.post_time}}</td> 
  <td><input id={{item.postid}} type="checkbox" ng-model="Selected" ng-click="check(item.postid,Selected)" /></td>   
</tr> 

仿照效法文献:

//www.jb51.net/article/68155.htm

如上便是本文的全体内容,希望本文的从头到尾的经过对大家的读书或然干活能拉动一定的增派,同不常间也指望多多支持脚本之家!

您大概感兴趣的篇章:

  • vue.js删除动态绑定的radio的钦赐项
  • vue.js选中动态绑定的radio的钦点项
  • 详解Vue.js动态绑定class
  • AngularJS动态绑定HTML的格局深入分析
  • AngularJS单选框及多选框完毕双向动态绑定
  • Chrome扩展页面动态绑定JS事件提示错误
  • Javascript动态绑定事件的轻便达成代码
  • js循环动态绑定带参数函数遇到的难点及缓慢解决方案[转]
  • javascript下动态this与动态绑定实例代码
  • JavaScript动态绑定详解
TAG标签:
版权声明:本文由990888藏宝阁发布于关于计算机,转载请注明出处:单选框及多选框的双向动态绑定,AngularJS单选框