从嵌套选择中使用ng-change()获取$ parent变量

时间:2018-10-24 15:09:15

标签: javascript angularjs components

我有一个在firefox上运行良好的代码,但在chrome上不工作。

人们要我让它在chrome上运行,但不能正常工作。

这是Firefox的工作代码:

<li class="list-group-item" ng-repeat="element in $ctrl.filtres"> 
            <b>Mon critère numéro {{$index}} :</b><br>

             <select ng-model="element.champs"  class="form-control" > 
                <option value="">Champs</option>
                <option  ng-repeat ="champs in $ctrl.table"  ng-click="$ctrl.verify_data_type(champs,$parent.element)" >{{champs.column_name}}</option>
            </select>


            <select ng-model="element.operateur" class="form-control"  >
                <option value="">Opérateur</option>
                <option ng-repeat ="operateur in $ctrl.operateurs" value="{{operateur.nom}}" >{{operateur.traduction}}</option>
            </select>

            <input ng-if="element.showText"     ng-model="element.critere"      type ="text"    class="form-control" placeholder="Votre recherche"      title="Entrez plusieurs critères avec des virgules" required></input>
            <input ng-if="element.showDate"     ng-model="element.critere"      type ="date"    class="form-control" placeholder="Une date"             required></input>
            <input ng-if="element.showInteger " ng-model="element.critere"      type ="number"  class="form-control" placeholder="Un nombre"            required></input>
        </li>

有一个嵌套的select,它必须触发一个verify_data_type函数,以显示正确的element.critere根据data_type的HTML输入...

在firefox中效果很好。

这是做切换的angularJs:

this.verify_data_type = function(champs,parent){

            switch(champs.data_type) {
                case 'integer':
                    parent.showInteger = true;
                    parent.showDate = false;
                    parent.showText = false;
                    break;
                case 'date':
                    parent.showInteger = false;
                    parent.showDate = true;
                    parent.showText = false;
                    break;
                case 'character varying':
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
                    break;
                default:
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
            } 



        }

现在,我正在尝试编写适用于CHROME的代码,所以我要删除ng-click并改为使用ng-change:

<li class="list-group-item" ng-repeat="element in $ctrl.filtres"> 
            <b>Mon critère numéro {{$index}} :</b><br>

             <select ng-model="$ctrl.champs"  class="form-control" ng-change="$ctrl.verify_data_type($parent)"> 
                <option value="">Champs</option>
                <option  ng-repeat ="champs in $ctrl.table"  ng-value="champs" >{{champs.column_name}} {{$parent}}</option>
            </select>


            <select ng-model="element.operateur" class="form-control"  >
                <option value="">Opérateur</option>
                <option ng-repeat ="operateur in $ctrl.operateurs" value="{{operateur.nom}}" >{{operateur.traduction}}</option>
            </select>

            <input ng-if="element.showText"     ng-model="element.critere"      type ="text"    class="form-control" placeholder="Votre recherche"      title="Entrez plusieurs critères avec des virgules" required></input>
            <input ng-if="element.showDate"     ng-model="element.critere"      type ="date"    class="form-control" placeholder="Une date"             required></input>
            <input ng-if="element.showInteger " ng-model="element.critere"      type ="number"  class="form-control" placeholder="Un nombre"            required></input>
        </li>

不幸的是,我无法让$ parent使其工作并显示输入内容,这是angularJs函数:

this.verify_data_type = function(parent){


            switch(this.champs.data_type) {
                case 'integer':
                    parent.showInteger = true;
                    parent.showDate = false;
                    parent.showText = false;
                    break;
                case 'date':
                    parent.showInteger = false;
                    parent.showDate = true;
                    parent.showText = false;
                    break;
                case 'character varying':
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
                    break;
                default:
                    parent.showInteger = false;
                    parent.showDate = false;
                    parent.showText = true;
            } 
        }

我可以在控制台中看到一个$ parent对象,但是它不再起作用。

我已经尝试过:例如,没有运气,parent.element.showInteger = false,我已经尝试过parent.this.element.showInteger = false,它也不起作用...

如果您有任何想法,我将不胜感激。

0 个答案:

没有答案