Question

我正在使用离子框架，我试图创建一个电话列表，可以添加和删除用户输入的电话号码。用户输入的号码列出了复选框，点击添加按钮。当用户选中复选框时并单击删除按钮，他必须能够删除所选的复选框电话号码。问题是在使用删除按钮时，它不会删除所选的复选框，而是删除在名单。所以请帮我删除用户选中的复选框项目。

html代码：

    <div>
     <ion-checkbox ng-model="phoneno" ng-repeat="y in phonelist">
       <span data-ng-bind="y"> {{y}}</span> </ion-checkbox>
     <button ng-click="remove($index)" value="Delete">Delete</button><br>
    </div>
    <br>
    <br>
    <div>
    <!label class="item item-input item-floating-label">
     <input ng-maxlength="10" ng-model="phone"> <br>
     <button ng-click="add()" value="Add">Add</button><br> 
     <!/label>
    </div>

  </ion-content >

</ion-view>

js code：

 .controller('PlaylistCtrl', function($scope, $stateParams) {
    })

    .controller('addAdmin',['$scope',function($scope){
           $scope.phonelist=[];
        $scope.add=function(phone){
        $scope.phonelist.push($scope.phone);
            $scope.phone='';
}
            $scope.remove=function(uuid){
              var x=$scope.phonelist[uuid];
              $scope.phonelist.splice(uuid,1);

            }
    }]);

Answer 1

抱歉我的英文。我是外国人.. 问题是你的循环在按钮之前结束，因此当单击按钮时，$ index始终为0。因为它不在元素内部＆＃34; ion-checkbox＆＃34;。

这是我的解决方案：在复选框内单击ng-click并使用$ index调用函数。在js中，将索引保存在范围var上。因此，如果单击删除按钮，则删除您在上一个函数中保存的索引。我希望我帮助过。

Answer 2

看起来你的意思不是你的代码所说的。您可能希望在单击按钮时删除所有已检查的电话。因此，您不需要<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="row"> <div style="background:purple" flex flex-order="0" flex-order-gt-sm="1"></div> <div style="background:yellow" flex flex-order="1" flex-order-gt-sm="0"></div> </div>属性，只需遍历手机并删除已检查的属性。

您必须跟踪每部手机的“已检查”属性，以便了解已检查的内容。您可以使用保存电话信息的对象而不仅仅是字符串来执行此操作：

$index

在你的控制器中：

<div>
    <!-- ng-model to a property of the phone that keeps track if the phone is checked -->
    <ion-checkbox ng-model="y.checked" 
                  ng-repeat="y in phonelist">
        <span data-ng-bind="y.number">{{ y.number }}</span>
    </ion-checkbox>
    <button ng-click="removeSelected()" value="Delete">Delete</button><br>
</div>
<!-- ng-model to a property of the phone object -->
<input type="text" ng-model="phone.number" />

请参阅this jsfiddle

或者查看我在Ionic中添加的this jsfiddle

Answer 3

您似乎正在混合添加和删除功能，尝试将这些功能分开，如下所示。

.controller('addAdmin',['$scope',function($scope){
    $scope.phonelist=[];
    //Add function 
    $scope.add=function(phone){
        $scope.phonelist.push(phone);
        $scope.phone='';
    }
    //Remove function 
    $scope.remove = function(index){
      $scope.phonelist.splice(index, 1);
    };
}]);

Answer 4

在<Page.Resources> <Storyboard x:Key="storyboard1" > </Storyboard> </Page.Resources> <ListView x:Name="list" Grid.Row="0" Grid.Column="0" Padding="50,0" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Center" HorizontalContentAlignment="Stretch" ItemClick="ListView_ItemClick" > <ListView.ItemsPanel> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" /> </ItemsPanelTemplate> </ListView.ItemsPanel> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Margin" Value="0,0,-70,0"></Setter> <Setter Property="MaxHeight" Value="100"></Setter> <Setter Property="MaxWidth" Value="68"></Setter> <Setter Property="Padding" Value="0,0,0,0"></Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <ListViewItemPresenter> <interactivity:Interaction.Behaviors> <interactions:EventTriggerBehavior EventName="GotFocus"> <media:ControlStoryboardAction Storyboard="{StaticResource storyboard1}"> </media:ControlStoryboardAction> </interactions:EventTriggerBehavior> </interactivity:Interaction.Behaviors> </ListViewItemPresenter> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListView.ItemContainerStyle> <ListViewItem> </ListViewItem> <Image x:Name="One" MaxWidth="68" Height="100" > <interactivity:Interaction.Behaviors> <interactions:EventTriggerBehavior> <media:ControlStoryboardAction Storyboard="{StaticResource storyboard1}"> </media:ControlStoryboardAction> </interactions:EventTriggerBehavior> </interactivity:Interaction.Behaviors> </Image> <Image x:Name="Two" MaxWidth="68" Height="100" /> <Image x:Name="Three" MaxWidth="68" Height="100" /> </ListView>

中添加以下代码

controller

这应该有用

从列表中删除所选项目

4 个答案: