AngularJS动态绑定ng-options的ng-model实例代码
程序员文章站
2022-06-24 17:08:03
什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样:
var classes = [
{
"name" : "温度 " ,
"o...
什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样:
var classes = [ { "name" : "温度 " , "options" : [ "cold" , "hot" , "normal" ]}, { "name" : "份量 " , "options" : [ "big" , "middle" , "small" ]} ];
此时你需要用 ng-repeat 将数据展开,并且将 options 个别设置为 ng-options 的数据,此时就须要动态去绑定 ng-model,那么该如何绑呢?你可能需要在你的 controller 底下加上一个变量来做这些动态呈现的 ng-options 的数据指定。
说的这么抽象,不如马上来看下吧。
<!-- dom --> <div class ="container"> <div ng-repeat= "class in classes"> {{classname}} <select ng-model="selectdcollection[classname]" ng-options="option for option in classoptions" ></select> </div> <a class="btn btn-success" ng-click= "submit()">送出 </a> </div> // javascript function democontroller($scope){ $scopeclasses = [ { "name": "温度 ", "options" : ["cold" , "hot", "normal"] }, { "name": "份量 ", "options" : ["big" , "middle" , "small" ] } ]; $scopeselectdcollection = {}; $scopesubmit = function() { console log($scope selectdcollection); }; }
在这一小段程序代码中,我们在 democontroller 里面宣告了 $scope.selectdcollection,这就是刚才提到的承接动态 ng-model 值的对象,这边定义了一个按钮,按下之后可以及时把动态呈现的 ng-options 所选的值丢到开发者工具的 console 去。
实际画面会是长这样。
按下送出可以在开发者工具看到如下的 log,成功取得资料。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 使用go语言实现查找两个数组的异同操作