angular使用select赋值的问题

来源：互联网发布：三星s4可以用4g网络吗编辑：程序博客网时间：2024/04/30 12:28

今天在使用angular的过程中发现了一个问题代码如下

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body ng-app = "yhn" ng-controller = "yhnController"><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><button id="hide">hide</button><button id="show">show</button><select name="" id="myselect" ng-change = "changeValue(x);" ng-model = "x"><option value="">ddd</option><option value="1">MON</option><option value="2">TUE</option><option value="3">WED</option><option value="4">THU</option><option value="5">FRI</option></select><script type="text/javascript">document.querySelector("#hide").onclick = function(){document.querySelector("#myselect").style.display = "none";}var app = angular.module("yhn",[]);app.controller('yhnController',function($scope){document.querySelector("#show").onclick = function(){document.querySelector("#myselect").style.display = "block";/*document.querySelector("#myselect").value = "5";*/document.querySelector("#myselect>option:nth-child(6)").selected = true;}$scope.changeValue = function(){console.log($scope.x)}})</script></body></html>

我们使用了ng-change来触发我们的changeValue函数，这里我们要同时打开console来观察

我们切换星期的时候会打印出来数字

举个例子我们点了TUE 会打印2 然后点击hide按钮将select框框隐藏掉

记住了我们刚才打印的是2哦

然后点击show按钮会显示FRI 这个时候再次切换到TUE的时候不会触发changeValue函数没有打印2

研究了一下问题出现在我们的使用js来对select框框赋值的话 ng-change监听不到啊

咋办后面加解决方案

/*****************************************************************************************/

解决办法1来了直接不用angular了

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body ng-app = "yhn" ng-controller = "yhnController"><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><button id="hide">hide</button><button id="show">show</button><select name="" id="myselect"><option value="1">MON</option><option value="2">TUE</option><option value="3">WED</option><option value="4">THU</option><option value="5">FRI</option></select><script type="text/javascript">document.querySelector("#hide").onclick = function(){document.querySelector("#myselect").style.display = "none";}var app = angular.module("yhn",[]);app.controller('yhnController',function($scope){document.querySelector("#show").onclick = function(){document.querySelector("#myselect").style.display = "block";/*document.querySelector("#myselect").value = "5";*/document.querySelector("#myselect>option:nth-child(5)").selected = true;}document.querySelector("#myselect").onchange = function(x){console.log(document.querySelector("#myselect").value);}})</script></body></html>

0 0