角度js或离子的动态下拉

时间:2016-06-01 09:31:57

标签: javascript angularjs html5 ionic-framework

<div class="row">
      <div class="col">
        <div class="select-child" ng-options="citie.name for citie in AllCities"
		ng-model="data.city">
          <label>Select Child</label>
          <select class="form-control">
            
<option value="" disabled selected style="display: none;">Please Select City</option>
            
          </select>
        </div>
      </div>
    </div>
<?php  


        global $woocommerce;
        $items = $woocommerce->cart->get_cart();

        foreach($items as $item => $values) { 
        $_product = $values['data']->post;
        //product image
        $getProductDetail = wc_get_product( $values['product_id'] );
        echo '<tr><td>';
        echo $getProductDetail->get_image(); // accepts 2 arguments ( size, attr )
        echo '</td>';
        echo '<td>';
        echo '<p style="font-size:10pt;">'.$_product->post_title.'</p><td><p style="font-size:10pt;">x'. $values['quantity'] . '</p></td>'; 
        echo '</td></tr>';
        };
   ?>

我试图创建一个动态下拉列表,但它显示未定义,这是我的代码

1 个答案:

答案 0 :(得分:3)

动态类别列表显示。

        <div class="label_EventDetail" align="left">Category</div>
            <select class="ion-input-select" ng-options="category.name for category in categorys" ng-model="selectedcategory" ng-change="callFunction(selectedcategory)">
                <option value="">Select Category</option>
            </select>
        </div>
像这样的

和$ scope变量

$scope.categorys = [{
            "id": 1,
            "name": "A",
            "select": true
        }, {
            "id": 2,
            "name": "B",
            "select": true
        }, {
            "id": 3,
            "name": "C",
            "select": true
        }, {
            "id": 4,
            "name": "D",
            "select": true
        }, {
            "id": 5,
            "name": "E",
            "select": true
        }, {
            "id": 6,
            "name": "F",
            "select": true
        }, {
            "id": 0,
            "name": "G",
            "select": true
        }];

//并且调用方法是

    $scope.callFunction = function(data) {
        console.log(data);
      //you selected any data from list show in console.
    }

上面的代码当我从列表中选择任何一个ng-change事件被称为

ng-change="callFunction(selectedcategory)"

并且callFunction不是必需的(它取决于使用)。

您可以从 selectedcategory 变量中选择数据。