Question

我的表格如下，

<form>
    <div class="list">
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text">
        </label>
        <label class="item item-button-right">
            Photo
            <button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
                Gallery
            </button>
            <button class="button button-small button-clear" ng-click="get_camera();">
                Camera
            </button>
        </label>
    </div>
</form>

问题在于无论我点击什么按钮，它总是会触发get_gallery()方法，而不会调用get_camera()。你能帮我解决一下这个问题吗？我也尝试了其他方式，看起来像，

<label class="item item-input item-stacked-label">
    Receipt
   <div>
        <button class="button button-small button-clear" ng-click="get_gallery();">
            Gallery
        </button>
        <button class="button button-small button-clear" ng-click="get_camera();">
            Camera
        </button>
    </div>
</label>

我做错了吗？这样做的正确方法是什么？

Answer 1

将标签标签更改为div，这将有所帮助。

Answer 2

出现此问题是因为在button中使用两个label您可以使用两个lable或替换div而不是lable这样

<form>
    <div class="list">
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text">
        </label>
        <div style="display:inline-block" class="item item-button-right">
            Photo
            <button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
                Gallery
            </button>
            <button class="button button-small button-clear" ng-click="get_camera();">
                Camera
            </button>
        </div>
    </div>
</form>

Answer 3

如果您确实需要Ionic标签内的按钮，可以将ng-click更改为按钮上的ng-mousedown。

<label class="item item-button-right">
     Photo
    <button class="..." ng-mousedown="get_gallery();">
       Gallery
    </button>
    <button class="..." ng-mousedown="get_camera();">
       Camera
    </button>
</label>

离子框架 - 表单标签内的按钮

3 个答案: