Sélectionnez options par ng-click ne fonctionne pas dans le navigateur google chrome en utilisant AngularJS

J'ai besoin d'utiliser ng-cliquez sur afin que je puisse passer trois paramètres et mettre dans mon local json, basé sur la sélection.

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

Je peux l'utiliser ng et ng-modifier comme suit.

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

Dans ce cas , je ne peux pas passer trois paramètres comme suit.

<select ng-model="item" ng-options="o.id as o.id for o in list" ng-change="onFunction(o.id,o.name)">{{item}}</select>
  • Vous n'utilisez pas l'objet o en ng-car il est uniquement valide dans la partie inférieure de la portée. La valeur du point est valide en raison de ng-model. Désormais, ng-change="onFunction(item.id, item.name)" serait correct. Aussi, supprimer {{item}} de l'intérieur de la <select/> tag.
  • Veuillez consulter : stackoverflow.com/questions/17337042/...
InformationsquelleAutor Krish Lakshmanan | 2014-01-10
  1. 14

    Enfin , j'ai trouvé la solution.

    JS fiddle lien

    Page HTML est 

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

    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;
    };
};
    InformationsquelleAutor Krish Lakshmanan
  2. 0

    Angulaire prend réellement soin de ce formulaire, vous avec ng:model. Vous n'avez pas besoin de passer des paramètres.

    Dans votre fonction de rappel vous pouvez le faire:

    $scope.onFunction = function() {
  var id = $scope.item.id;
  var name = $scope.item.name;
  ...
};
    InformationsquelleAutor mmattax
  3. 0

    J'ai le même problème et je résoudre ce que Krish Lakshmanan fait. J'ai également ajouté:

    <option value="">Some text</option>

    OU de force pour sélectionner un membre de la liste)

    $scope.options = [1,2,3];
$scope.d  = $scope.options[0];

    Je ne sais pas pourquoi, mais à l'aide de google Chrome avec AngularJs, ce bug de sélection qui se passe, je pense que le problème est au Chrome, parce que Firefox cela a fonctionné (je pensais que firefox définit la valeur sur focus de l'entrée).

    J'ai trouvé ce fil de discussion ici:
    https://github.com/angular/angular.js/issues/4836

    Le bug: http://jsbin.com/wofejo/1/

    La solution de contournement: http://jsfiddle.net/JqnMr/

    La solution 2 ici: http://jsfiddle.net/y61pacre/

    Et ce problème sur chrome: https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Pri%20M%20Week%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=&id=415505

    J'espère que j'ai aidé quelqu'un, si vous trouvez la solution sans l'aide d'un vide, d'option ou de forcer la sélection d'un membre, s'il vous plaît dites-moi! 🙂

    InformationsquelleAutor Filipe Cotrim Melo