通过NG-单击选择的选项在Chrome浏览器中使用AngularJS工作 [英] Select options through ng-click is not working in chrome browser using AngularJS

问题描述

我需要使用NG-点击，这样我可以通过三个参数，并基于选择在我的本地JSON设置。

 ＆LT;选择＆GT;
＆LT;选项ID =值=＆GT;  - 选择 - ＆LT; /选项＆GT;
＆LT;选项NG重复=在比较中比较NG点击=setSkillComparisonOperator（索引，comparison.sid，comparison.name）
 NG-选择=comparison.sid == data.value.comparisonOperator.sid＆GT; {{comparison.name}}＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

我可以用它NG-模型和NG-变化如下：

 ＆LT;选择NG模型=项NG选项=o.id在列表o.id邻NG变化=onFunction（项目）＆GT ; {{}项}＆LT; /选择＆GT;
 

在这种情况下，我不能传递三个参数如下：

 ＆LT;选择NG模型=项NG选项=o.id作为o.id邻列表中的NG变化=onFunction（o.id， o.name）＆GT; {{}项}＆LT; /选择＆GT;
 

解决方案

最后，我找到了解决办法。

JS小提琴链接

HTML页面

 ＆LT; D​​IV NG-应用=miniapp＆GT;
    ＆LT; D​​IV NG控制器=CTRL＆GT;
        ＆LT;选择NG模型=selectedColorNG选项=颜色color.name在色彩色NG-的init =selectedColor =检查（颜色1，颜色）NG变化=的setColor（selectedColor）＆GT ;
            ＆LT;期权价值=＆GT;选择颜色和LT; /选项＆GT;
        ＆LT; /选择＆GT;
        ＆LT; BR /＆GT;
        ＆LT; BR /＆GT;
        颜色编号：LT;跨度NG绑定=colorId＆GT;＆LT; / SPAN＆GT;
        ＆LT; BR /＆GT;
        颜色名称：＆LT;跨度NG绑定=色＆GT;＆LT; / SPAN＆GT;
        ＆LT; BR /＆GT;
        色差：＆LT;跨度NG绑定=树荫＆GT;＆LT; / SPAN＆GT;
        ＆LT; BR /＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript是

 变量$范围;
VAR应用= angular.module（'miniapp'，[]）;功能Ctrl（$范围）{
    $ scope.colorId = 4;
    $ scope.shade = NULL;
    $ scope.color = NULL;
    $ scope.color1 = {名称：'红'，值：'红'，ID：2};
    $ scope.colors = [
        {名称：'红'，灯罩：白，ID：1}，
            {名称：'橙'，灯罩：红，ID：2}，
            {名称：'黄'，灯罩：'蓝'，ID：3}，
            {名称：'绿色'，灯罩：黄，ID：4}，
            {名称：'蓝'，灯罩：靛蓝，ID：5}，
            {名：靛蓝，荫：紫罗兰，ID：6}，
            {名称：'紫罗兰'，灯罩：橙色，ID：7}
     ];
    $ scope.check =功能（selectedColor，颜色）{
        VAR I = NULL;
        为（i的颜色）{
            如果（颜色[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.

JS fiddle link

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-单击选择的选项在Chrome浏览器中使用AngularJS工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！