如何基于AngularJS中选中的单选框显示特定的div

Question

我有单选按钮和带有ng重复的“删除”文本，在此基于单选按钮选中时，我需要显示删除文本，每当我单击单选按钮时，都应显示“删除”文本，当我单击下一个单选按钮时应再次显示按钮“删除”应为上一个未选中的单选按钮隐藏，并为下一个选中的单选按钮显示。 对我来说，它的工作原理是隐藏下一个单选按钮的onclick而不是单击。下面给出了代码。有人可以帮我，我是angularjs的新手。

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.div_ = [];

  $scope.items = [{
      id: 1,
      title: "first item"
    },
    {
      id: 2,
      title: "second item",
    },
    {
      id: 3,
      title: "third item",
    }
  ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src="app.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
  <ul ng-repeat="item in items">
    <li style="color:red;display:inline" ng-click="item=1"><input type="radio" name="samename" value={{$index}}></li>
    <li style="color:blue;display:inline;margin-left:100px;" name="samenaame" ng-show="item==1" ng-show="item==1">delete</li>
  </ul>
</div>

Answer 1

我尝试对您的主代码进行最少的更改，但是我认为这是有缺陷的。

不确定您要使用多个ul想要实现什么，所以我将其删除。

在此示例中，您可以使用ng-repeat-start和-end，也许正是您想要的。

此代码将仅显示一个额外的“ li”，具体取决于您选择的ID。 （使用“帮助程序”属性）

var app = angular.module('plunker', []);
    app.controller('MainCtrl', function($scope) {
      $scope.div_ = [];
      $scope.selectedItem;//or nothing
      
      $scope.items = [{
          id: 1,
          title: "first item"
        },
        {
          id: 2,
          title: "second item",
        },
        {
          id: 3,
          title: "third item",
        }
      ];
      
      $scope.handleClick = function (item) {
        $scope.selectedItem = item;
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
    <div ng-app="plunker" ng-controller="MainCtrl">
      <ul>
        <li ng-repeat-start="item in items" style="color:red;display:inline" ng-click="handleClick(item)">#Item={{item.id}}
<input type="radio" name="samename" value={{$index}}>
</li>
        <li ng-repeat-end style="color:blue;display:inline;margin-left:100px;" ng-show="selectedItem==item">delete #{{item.id}}</li>
      </ul>
      
    </div>