javascript - 自定义切换功能不适用于 Ionic 应用程序中的 ng-click

Question

我想在我的 Ionic 应用程序中创建以下内容:

1. 用户可以看到单选按钮列表
2. 当用户点击项目时(目前仅“比较”有效)，它会自动在列表中显示后续问题
3. 当用户点击问题(位于列表分隔线中)时，包含答案的列表将切换为可见。

对于第一个问题，这种切换效果很好。但是，对于第二个问题，我无法让它发挥作用。

当我在“vizType”和“comparison”对象中使用相同的函数名称“toggleList”时，是否有问题？否则我不知道为什么这不起作用。谢谢!

HTML 代码

<ion-view title="Chartly" hide-back-button="true">
<ion-content>
    <ion-list ng-controller="questionsAnswersCtrl">
        <div ng-show="vizType.questionVisible">
          <div class="item item-divider item-icon-right" ng-click="vizType.toggleList()">
              1. VISUALIZATION TYPE
              <i class="icon ion-chevron-down" ng-show="!vizType.answersVisible"></i>
              <i class="icon ion-chevron-up" ng-show="vizType.answersVisible"></i>
              <span class="answer">{{ vizType.answer }}</span>
          </div>
          <div ng-show="vizType.answersVisible">
              <ion-radio ng-model="vizType.answer" ng-value="'Comparison'">Comparison</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Distribution'">Distribution</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Relationship'">Relationship</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Composition'">Composition</ion-radio>
          </div>
        </div>

        <div ng-show="comparison.questionVisible">
            <div class="item item-divider item-icon-right" ng-click="comparison.toggleList()">
                2. COMPARISON BETWEEN
                <i class="icon ion-chevron-down" ng-show="!comparison.answersVisible"></i>
                <i class="icon ion-chevron-up" ng-show="comparison.answersVisible"></i>
                <span class="answer">{{ comparison.answer }}</span>
            </div>
            <div ng-show="comparison.answersVisible">
                <ion-radio ng-model="comparison.answer" ng-value="'Time Periods'">Time Periods</ion-radio>
                <ion-radio ng-model="comparison.answer" ng-value="'Categories'">Categories</ion-radio>
            </div>
        </div>
    </ion-list>


</ion-content>

JS代码

.controller('questionsAnswersCtrl', function($scope) {

/* VISUALIZATION TYPES */
$scope.vizType = {
    answersVisible: true,
    questionVisible: true,
    answer: ''
};

$scope.vizType.toggleList = function() {
    $scope.vizType.answersVisible = !$scope.vizType.answersVisible;
};

$scope.$watch('vizType.answer', function(newVal, oldVal) {
    console.log(newVal, oldVal);

    if (newVal) {
        $scope.vizType.answersVisible = false;
    }

    if (newVal == 'Comparison' && newVal != oldVal) {
        $scope.comparison = {
            answersVisible: true,
            questionVisible: true
        };
    } else {
        $scope.comparison = {
            answersVisible: false,
            questionVisible: false
        };
    }
});



/* COMPARISON */
$scope.comparison = {
    answersVisible: false,
    questionVisible: false,
    answer: ''
};

$scope.comparison.toggleList = function() {
    $scope.comparison.answersVisible = !$scope.comparison.answersVisible;
};
})

Answer 1

我成功解决了这个问题。下面为有兴趣的人提供 HTML 和 JS 代码。

HTML 代码

<ion-view title="Chartly" hide-back-button="true">
<ion-content>
    <ion-list ng-controller="questionsAnswersCtrl">

        <div ng-show="vizType.questionVisible">
          <div class="item item-divider item-icon-right" ng-click="vizType.toggleList()">
              1. VISUALIZATION TYPE
              <i class="icon ion-chevron-down" ng-show="!vizType.answersVisible"></i>
              <i class="icon ion-chevron-up" ng-show="vizType.answersVisible"></i>
              <span class="answer">{{ vizType.answer }}</span>
          </div>
          <div ng-show="vizType.answersVisible">
              <ion-radio ng-model="vizType.answer" ng-value="'Comparison'" ng-change="vizType.processAnswer('comparison')" name="vizType">Comparison</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Distribution'" ng-change="vizType.processAnswer('distribution')" name="vizType">Distribution</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Relationship'" ng-change="vizType.processAnswer('relationship')" name="vizType">Relationship</ion-radio>
              <ion-radio ng-model="vizType.answer" ng-value="'Composition'" ng-change="vizType.processAnswer('composition')" name="vizType">Composition</ion-radio>
          </div>
        </div>

        <div ng-show="comparison.questionVisible">
            <div class="item item-divider item-icon-right" ng-click="comparison.toggleList()">
                2. COMPARISON BETWEEN
                <i class="icon ion-chevron-down" ng-show="!comparison.answersVisible"></i>
                <i class="icon ion-chevron-up" ng-show="comparison.answersVisible"></i>
                <span class="answer">{{ comparison.answer }}</span>
            </div>
            <div ng-show="comparison.answersVisible">
                <ion-radio ng-model="comparison.answer" ng-value="'Time Periods'" name="comparison">Time Periods</ion-radio>
                <ion-radio ng-model="comparison.answer" ng-value="'Categories'" name="comparison">Categories</ion-radio>
            </div>
        </div>
    </ion-list>


</ion-content>

JS代码

.controller('questionsAnswersCtrl', function($scope) {

/* VISUALIZATION TYPES */
$scope.vizType = {
    answersVisible: true,
    questionVisible: true,
    answer: '',
    toggleList: function() {
        $scope.vizType.answersVisible = !$scope.vizType.answersVisible;
    },
    processAnswer: function(answer) {
        $scope.vizType.answersVisible = false;

        if (answer == 'comparison') {
            $scope.comparison.answersVisible = true;
            $scope.comparison.questionVisible = true;
        } else {
            $scope.comparison.answersVisible = false;
            $scope.comparison.questionVisible = false;
            $scope.comparison.answer = '';
        }
    }
};

/* COMPARISON */
$scope.comparison = {
    answersVisible: false,
    questionVisible: false,
    answer: '',
    toggleList: function() {
        $scope.comparison.answersVisible = !$scope.comparison.answersVisible;
    }
};
})