如何在离子框架中的行上添加图标? [英] How to add icon on row in ionic framework?

问题描述

我正在尝试用 ionic 制作简单的演示.我有一个页脚有一个图标 ion-compose(左下角的图标).当我单击该图标时，它会显示一个弹出屏幕，我在文本字段中输入名称，然后按 保存 按钮.然后它生成一行，其文本与弹出屏幕的文本字段中所写的文本相同.我需要在行上添加图标按钮(如删除按钮、编辑按钮).我们可以像在页脚(左下角离子组合器)中那样在动态生成的行上添加图标吗?

请在行上添加离子

这是我的代码

解决方案

相关:如何在ionic中动态生成的行中添加图标

添加了图标.您必须为按钮添加功能.

HTML:

 {{item.testcase}}<button class="button {{item.close}}"></button><button class="button {{item.edit}}"></button>

JS:

myPopup.then(function(res) {console.log('Tapped!', res);if(typeof res!='undefined')res.edit="离子编辑";res.close="离子关闭";$scope.items.push(res)console.log($scope.items);});

http://codepen.io/anon/pen/XbJJzO

I am trying to make simple demo in ionic. I have one footer having one icon ion-compose (bottom left icon). When I click on that icon it show a pop up screen I enter name in text field and press save button. Then it generates a row which have same text as written in textfield of popup screen. I need to add icon buttons on row (like delete button, edit button). Can we add icon on dynamically generated row as I did in footer (bottom left ion-composer)?

Please add ion on row

Here is my code

http://codepen.io/anon/pen/qdEEPW

   <ion-item ng-repeat="item in items">
                {{item.testcase}}
                <ion-reorder-button class="ion-navicon"></ion-reorder-button>

            </ion-item>

please press bottom button on left side of footer .when click it show pop up snd fill entry it generate the row.I need to add icons on row I will show the image what i want I need delete icon and edit button icon on row..you can choose amy icon from this link http://ionicons.com/

解决方案

Related: how to add icons in row which is generated dynamically in ionic

icons added. You will have to add the functions for the buttons.

HTML:

    <ion-item ng-repeat="item in items">
        {{item.testcase}}
      <button class="button {{item.close}}"></button>
      <button class="button {{item.edit}}"></button>

JS:

myPopup.then(function(res) {
        console.log('Tapped!', res);
        if(typeof res!='undefined')
          res.edit="ion-edit";
          res.close="ion-close";
        $scope.items.push(res)

        console.log($scope.items);
    });

http://codepen.io/anon/pen/XbJJzO

这篇关于如何在离子框架中的行上添加图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！