通过 ng-click 选择选项在使用 AngularJS 的 chrome 浏览器中不起作用 [英] Select options through ng-click is not working in chrome browser using AngularJS
本文介绍了通过 ng-click 选择选项在使用 AngularJS 的 chrome 浏览器中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要使用 ng-click 以便我可以传递三个参数并根据选择在我的本地 json 中设置.
我可以使用 ng-model 和 ng-change 如下.
那样的话,我不能传递如下三个参数.
解决方案
最后,我找到了解决方案.
HTML 页面是
<div ng-controller="Ctrl"><select ng-model="selectedColor" ng-options="color as color.name for color in colors" ng-init="selectedColor = check(color1,colors)" ng-change="setColor(selectedColor)"><option value="">选择颜色</option></选择><br/><br/>颜色 ID:<span ng-bind="colorId"></span><br/>颜色名称:<span ng-bind="color"></span><br/>色度:<span ng-bind="shade"></span><br/>
Javascript 是
var $scope;var app = angular.module('miniapp', []);功能Ctrl($范围){$scope.colorId = 4;$scope.shade = null;$scope.color = null;$scope.color1 = {name:'Red', value: 'red',id:2};$scope.colors = [{名称:'红色',阴影:'白色',id:1},{名称:'橙色',阴影:'红色',id:2},{名称:'黄色',阴影:'蓝色',id:3},{名称:'绿色',阴影:'黄色',id:4},{名称:'蓝色',阴影:'靛蓝',编号:5},{名称:'靛蓝',阴影:'紫罗兰',编号:6},{名称:'紫罗兰',阴影:'橙色',id:7}];$scope.check =function(selectedColor,colors){var i = null;for(i 颜色){if(colors[i].id == selectedColor.id){返回颜色[i];}}};$scope.setColor=函数(颜色){$scope.colorId = color.id;$scope.shade = color.shade;$scope.color = color.name;};};
I need to use ng-click so that I can pass three parameters and set in my local json based on the selection.
<select>
<option id="" value="">--Select--</option>
<option ng-repeat="comparison in comparisons" ng-click="setSkillComparisonOperator(index,comparison.sid,comparison.name)"
ng-selected="comparison.sid == data.value.comparisonOperator.sid">{{comparison.name}}</option>
</select>
I can use it ng-model and ng-change as follows.
<select ng-model="item" ng-options="o.id as o.id for o in list" ng-change="onFunction(item)">{{item}}</select>
In that case , I can't pass three parameters as follows.
<select ng-model="item" ng-options="o.id as o.id for o in list" ng-change="onFunction(o.id,o.name)">{{item}}</select>
解决方案
At last , I found solution.
HTML page is
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<select ng-model="selectedColor" ng-options="color as color.name for color in colors" ng-init="selectedColor = check(color1,colors)" ng-change="setColor(selectedColor)">
<option value="">Select A Color</option>
</select>
<br/>
<br/>
Color Id: <span ng-bind="colorId"></span>
<br/>
Color name: <span ng-bind="color"></span>
<br/>
Color shade: <span ng-bind="shade"></span>
<br/>
</div>
</div>
Javascript is
var $scope;
var app = angular.module('miniapp', []);
function Ctrl($scope) {
$scope.colorId = 4;
$scope.shade = null;
$scope.color = null;
$scope.color1 = {name:'Red', value: 'red',id:2};
$scope.colors = [
{name:'Red', shade: 'white',id:1},
{name:'Orange', shade: 'red',id:2},
{name:'Yellow', shade: 'blue',id:3},
{name:'Green', shade: 'yellow',id:4},
{name:'Blue', shade: 'indigo',id:5},
{name:'Indigo', shade: 'violet',id:6},
{name:'Violet', shade: 'orange',id:7}
];
$scope.check =function(selectedColor,colors){
var i = null;
for(i in colors){
if(colors[i].id == selectedColor.id){
return colors[i];
}
}
};
$scope.setColor= function(color){
$scope.colorId = color.id;
$scope.shade = color.shade;
$scope.color = color.name;
};
};
这篇关于通过 ng-click 选择选项在使用 AngularJS 的 chrome 浏览器中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文