Question

在我的手风琴中（为此创建了指令expandder）我有疑问，是/否下拉答案http://jsfiddle.net/xVZEX/116/

<expander ng-repeat="form in FormDataList.SectionList">
    <div id="{{form.SectionID}}">
        <div ng-repeat="question in form.QuestionList">
            <span>{{question.QuestionText}}</span>
            <select name="ans_{{form.SectionID}}_{{$index}}" ng-model="item" 
                    ng-change="CalculateValidationPoints(item, question, 
                    form.SectionID)" ng-options="ans as ans.AnswerText for 
                    ans in question.AnswerList">
                    <option value="">--Select--</option>
            </select>          
            <input type="text" ng-model="ExitName" 
                   ng-show="name_{{question.QuestionID}}.show" 
                   placeholder="Name"/>
            <input type="text" ng-model="ExitTitle" 
            ng-show="name_{{question.QuestionID}}.show" placeholder="Title"/>
        </div>
    </div>  
</expander>

我正在展示20个问题。用户可以选择是/否来回答每个问题并转到下一个问题。如果他/她选择是，则最后一个问题需要用户填写他们的姓名和头衔。如果最后一个问题用户选择否，则不需要名称和标题。为了达到这个目的，我在扩展器中添加了两个输入ExitName和ExitTitle以及NG-show，在我的控制器中，我显示并隐藏了我对问题的输入

if (question.QuestionText === "Was exit conference conducted?" && selectedAnswer.AnswerText === "Yes") {

        var propName = "name_" + selectedAnswer.QuestionID;
        var propTitle = "title_" + selectedAnswer.QuestionID;

        $rootScope[propName] = {
            show: true
        };
        $scope[propName] = $rootScope[propName];
        $rootScope[propTitle] = {
            show: true
        };
        $scope[propTitle] = $rootScope[propTitle];

        $scope.IsExit = true;
    }
    else {
        $scope.IsExit = false;
    }

它完美无缺。但是我对此并不满意，因为在DOM中将有两个输入的ExitName和ExitTitle仅用于隐藏所有20个问题。我想用ng-if替换ng-show。

如何更改我的代码以使ng-if工作。

修改--------

因此，对于测试，我创建了一个输入

<input type="text" ng-if="name_{{question.QuestionID}}.show"/>

在我的扩展器中现在正如你所建议的那样我在控制器中找到了这个

if (question.QuestionText === "Was exit conference conducted?" && selectedAnswer.AnswerText === "Yes") {
        var vm = this;
        var propName = "name_" + selectedAnswer.QuestionID;
        var propTitle = "title_" + selectedAnswer.QuestionID;

        vm[propName] = {
            show: true
        };

    }
    else {
        vm[propName] = {
            show: false
        };
    }

不起作用

用ng-if替换ng-show

0 个答案: