当前位置: 首页 > 面试题库 >

通过ng-click选择选项在使用AngularJS的chrome浏览器中不起作用

林丁雷
2023-03-14
问题内容

我需要使用ng-click,以便我可以传递三个参数并根据选择在本地json中进行设置。

<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>

我可以如下使用它ng-model和ng-change。

<select ng-model="item" ng-options="o.id as o.id for o in list" ng-change="onFunction(item)">{{item}}</select>

在这种情况下,我不能按如下方式传递三个参数

<select ng-model="item" ng-options="o.id as o.id for o in list" ng-change="onFunction(o.id,o.name)">{{item}}</select>

问题答案:

最后,我找到了解决方案。

JS小提琴链接

HTML页面是

<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是

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;
    };
};


 类似资料:
  • 问题内容: 我有以下代码的视图: 目标是无需使用href即可过渡到新状态。不幸的是,上面的代码不会触发。 我还尝试为此视图在控制器中包括$ state: 但是仍然没有。transictionTo也似乎不起作用。 有人对如何进行这项工作有任何想法吗? 编辑:我只能通过分配使其工作: 在我的控制器内。这看起来很丑。如果没有将$ state分配给作用域,是否真的没有其他方法可以访问$ state? 问题

  • 问题内容: 我有一个选择 但是当两个c.CollegeName == collegeSelection.CollegeName都匹配时,仍未选择该项目。文档似乎没有帮助。有任何想法吗? 问题答案: 应该在标记中使用,而不是在标记中使用。请仔细阅读其文档和示例。 因为指令对所选选项的确定基于。因此,一旦删除,您的代码就可以使用。 我创建了一个非常简单的插件来演示指令中的“选定”功能。 更多细节: A

  • 统一使用 Chrome 作为 Web 开发者,我们的无论是浏览信息或者开发项目,都离不开浏览器。在本站的系列课程中,为了避免歧义,我们 要求 大家统一使用 Chrome 作为指定浏览器。 Google Chrome,是一款由 Google 公司开发的网页浏览器。Chrome 在 2008 年 9 月 2 日发布 Beta 版本,一经发布就广受好评。提供 50 种语言版本,有 Windows、OS

  • 问题内容: 这应该工作: 它可以在Firefox中运行,但不能在Chrome中运行(可能未在IE中运行,未经测试)。 一个更有趣的示例: 是将选项元素与DOM分离的唯一选择吗?我需要稍后再显示给他们,所以这不会很有效。 问题答案: 不幸的是,您不能在所有浏览器中隐藏元素。 在过去,当我需要这样做时,我就设置了它们的属性,就像这样… 然后,我使用了这段CSS,在浏览器中支持隐藏的位置…

  • 问题内容: 我有一个像这样的控制器: 当我尝试使用ng-click调用upload_variant_image函数时,它仅在绑定到静态DOM时才有效(当DOM加载时),我有这样的链接: 但是此元素是在DOM加载后动态添加的,因此ng-click不起作用。 但是当我在Rails中像这样更新DOM时,它不起作用: 问题答案: 我警告您,如果您通过Angular外部方法来操纵DOM,则可能不会完全接受A

  • 加拿大城市列表中卡尔加里的选择不起作用,按专业语法单击搜索按钮后,它将始终返回搜索结果中的所有城市。这是我的密码: 提前谢谢!