【问题标题】:How to output two dynamic variables that depend on each other如何输出两个相互依赖的动态变量
【发布时间】:2015-12-21 01:40:50
【问题描述】:

例如:

控制器:

AllBooks[{
book1:{
hardcover{price:25.99},e-book{price:1.99}
}
},
book2:{
hardcover{price:60.00},e-book{price:2.99}
}];

$scope.bookchoice = function(selectedBook) {
$rootScope.choice = selectedBook;}


$scope.booktype = function(selectedType) {
$rootScope.type = selectedType;}

HTML:

<button ng-click="bookchoice(book1)">Book1</button>
<button ng-click="booktype(e-book)">E-Book</button>

{{choice.type.price}} <---this does not work

所以我想知道如何组合两个因动态变量来访问数组的一部分并输出信息

谢谢:)

【问题讨论】:

    标签: javascript html angularjs ionic-framework ionic


    【解决方案1】:

    您的 AllBooks 数据有点奇怪。我不确定是否可能,但我会像这样重新格式化它。然后您可以使用密钥轻松访问数据。

    AllBooks = {
       book1:{hardcover{price:25.99},e-book{price:1.99}},
       book2:{hardcover{price:60.00},e-book{price:2.99}}
    };
    
    $scope.bookchoice = function(selectedBook) {
    $rootScope.choice = AllBooks[selectedBook];}
    
    
    $scope.booktype = function(selectedType) {
    $rootScope.type = selectedType;}
    

    你可以这样访问它

    <button ng-click="bookchoice('book1')">Book1</button>
    <button ng-click="booktype('e-book')">E-Book</button>
    
    {{choice[type].price}} 
    

    您可能希望在 ng-click 方法中使用引号以避免出现问题。

    【讨论】:

    • AllBook 数据是如何格式化的?您是生成它还是从服务器获取它?它的格式很奇怪。
    • 我完全复制了您的解决方案,但它使应用程序崩溃...我认为这是格式问题
    【解决方案2】:

    控制器

    $scope.allBooks = { 
        book1: {
            hardcover: {
                price: 25.99
            },
            e_book: {
                price: 1.99
            }
        }, 
        book2: {
            hardcover: {
                price: 60.00
            },
            e_book: {
                price: 2.99
            }
        }
    } ;
    
    $scope.bookchoice = function ( selectedBook ) {
        $rootScope.choice = selectedBook;
    }
    
    $scope.booktype = function ( selectedType ) {
        $rootScope.choice.type = selectedType;
    }
    

    HTML

    <button ng-click="bookchoice(allBooks.book1)">Book1</button>
    <button ng-click="bookchoice(allBooks.book2)">Book2</button>
    <button ng-click="booktype(choice.e_book)">E-Book</button>
    <button ng-click="booktype(choice.hardcover)">Hardcover</button>
    
    {{choice.type.price}}
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-04-26
      • 1970-01-01
      • 1970-01-01
      • 2019-04-02
      • 2021-09-19
      相关资源
      最近更新 更多