angularjs:在ng-repeat

时间:2018-01-31 05:35:07

标签: javascript html angularjs

我正在使用ng-repeat方法

在angularjs中显示添加/删除文本字段
app.controller('myCtrl',function($scope){

 $scope.items = [];

 $scope.addItems = function(){
      $scope.items.push({
          title:null
        });
 }

 $scope.removeItem = function(index){
      $scope.items.splice(index,1)
  }
})

HTML

<div ng-repeat="item in items track by $index ">
     //dynamic text field
     <input type="text" ng-model="items[$index].title">

     <div class="opt_btn_cls" ng-click="removeItem($index)"></div>

     //show only when click on current textfield
     <div >item details</div>

</div>
 <div class="ans_opt_btn_add" ng-click="addItems();">

我想在点击每个文本字段时显示div,并且在其他文本字段点击时应该隐藏。

我该怎么做?

1 个答案:

答案 0 :(得分:0)

使用ngfocus

 app.controller('myCtrl', function($scope) {
    $scope.items = [];
    $scope.selected=-1;
    $scope.addItems = function() {
        $scope.items.push({
            title: null
        });
    }
    $scope.removeItem = function(index) {
        $scope.items.splice(index, 1)
    }
 })

HTML

    <div ng-repeat="item in items track by $index ">
    //dynamic text field
    <input type="text" ng-focus="selected=$index"  ng-blur="selected=-1"  ng-model="items[$index].title">
    <div class="opt_btn_cls" ng-click="removeItem($index)"></div>
    //show only when click on current textfield
     <div ng-if="selected==$index">item details</div>
   </div>
  <div class="ans_opt_btn_add" ng-click="addItems();">