Question

我是angularjs的新手，并尝试学习/找到解决方案，用户可以选择多个值，然后根据所选的值显示不同的结果。

我制作了jsfiddle三个值组合的三个示例结果。

如果用户从下拉列表中选择了Name1，Name1和Name1，则显示div class show-this-1

的结果

如果值为Name2，Name2和Name2，则显示div类的结果 show-this-2

如何实现这个？

HTML：

    <div ng-controller="Main" ng-app>
    <div>selections = {{selections}}</div>

    <div>
        <p>Select values</p>

        <select ng-model="selections[0]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[1]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[2]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>
    </div>

    <div class="show-this-1">3x Name1 chosen</div>
    <div class="show-this-2">3x Name2 chosen</div>
    <div class="show-this-3">3x Name3 chosen</div>

</div>

JS：

function Main($scope) {

$scope.selections = ["", "", ""];

$scope.sample = function() {
    $scope.selections = [ "id-1", "id-2", "id-3" ];
}

$scope.items = [{
    id: 'id-1',
    name: 'Name 1'},
{
    id: 'id-2',
    name: 'Name 2'},
{
    id: 'id-3',
    name: 'Name 3'}];
}

jsfiddle Preview

Answer 1

如果你想只显示三个div中的一个，这取决于用户是否在所有三个下拉列表中选择了相同的选项，那么答案将是：

<div ng-controller="Main" ng-app>
    <div>selections = {{selections}}</div>

    <div>
        <p>Select values</p>

        <select ng-model="selections[0]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[1]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>

        <select ng-model="selections[2]" ng-options="i.id as i.name for i in items">
            <option value=""></option>
        </select>
    </div>

    <div>
        <div class="show-this-1" ng-show="selections[0] == items[0].id && selections[1] == items[0].id && selections[2] == items[0].id">3x Name1 chosen</div>
        <div class="show-this-2" ng-show="selections[0] == items[1].id && selections[1] == items[1].id && selections[2] == items[1].id">3x Name2 chosen</div>
        <div class="show-this-3" ng-show="selections[0] == items[2].id && selections[1] == items[2].id && selections[2] == items[2].id">3x Name3 chosen</div>
     </div>

</div>

jsfiddle

根据用户选择的值显示不同的结果

1 个答案: