如何根据在angularjs中选中的单选框显示特定的div

Question

我有单选按钮和带有 ng 重复的“删除”文本，这里基于选中的单选按钮我需要显示删除文本，每当我点击单选按钮时，“删除”文本应该显示，当我点击下一个单选时再次显示按钮“删除”应隐藏上一个未选中的单选按钮，并应显示下一个选中的单选按钮。 对我来说它的工作，但点击下一个单选按钮之前的“删除”文本没有隐藏。代码如下。谁能帮助我，我是 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>