工作演示

Question

我正在学习Angular js，我创建了一个项目。

我所做的最多，但我面临一个问题。

我的数据是重复投掷tr，我有内联可编辑选项类型，描述，优先级

如果我在两个链接中点击而不是显示到可编辑模式但显示所有我想只显示一个如何执行此操作

HTML代码

 <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction()" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction()" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

Angular jS代码

   var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create Google Logo'},
            {'title':'Talk to XYZ about Google'},
            {'title':'Testing Google Coding'},
            {'title':'Create Documentaion about Google'},
            {'title':'Create Client Sample form'},
            {'title':'Modify Top Navigation'},
            {'title':'Change Footer text and color'},
            {'title':'Redesign Google Dashboard'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];
        $scope.selectedAction =$scope.options[1];
        $scope.selectTypeAction = function(index){
          console.log(index);
          $scope.typeAction = true;
        };
        $scope.changeTypeAction = function(){
          $scope.typeAction = false;
        }

        $scope.desType = 'Google logo needs a new concept';
        $scope.desTypeAction = function(idx){
          $scope.typeDescAction = true;
        }
        $scope.changeDesAction = function(idx){
          $scope.typeDescAction = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction =$scope.priOptions[1];
        $scope.priTypeAction = function(index){
          console.log(index);
          $scope.typePriAction = true;
        };
        $scope.changePriTypeAction = function(){
          $scope.typePriAction = false;
        }
        /* ************************************************ */
});

[Plunker URL][1]

Plunker Link

Answer 1

使用“此”对象

过去这个HTML COde

 <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index,this)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction(this)" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index,this)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index,this)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index,this)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction(this)" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

过去这个js代码

  var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {

    /* ************************************************ */
    $scope.todoData = [
        { 'title': 'Create Google Logo' },
        { 'title': 'Talk to XYZ about Google' },
        { 'title': 'Testing Google Coding' },
        { 'title': 'Create Documentaion about Google' },
        { 'title': 'Create Client Sample form' },
        { 'title': 'Modify Top Navigation' },
        { 'title': 'Change Footer text and color' },
        { 'title': 'Redesign Google Dashboard' }
    ]


    $scope.options = [
      { label: 'Action Item', value: 1 },
      { label: 'Defect', value: 2 },
      { label: 'Meeting Invite', value: 3 },
      { label: 'Issue', value: 4 },
      { label: 'Enhancement', value: 5 },
      { label: 'Risk', value: 6 },
      { label: 'Proposal', value: 7 }
    ];
    $scope.selectedAction = $scope.options[1];
    $scope.selectTypeAction = function (index, objVal) {
        console.log(index);
        objVal.typeAction = true;
    };
    $scope.changeTypeAction = function (objVal) {
        objVal.typeAction = false;
    }

    $scope.desType = 'Google logo needs a new concept';
    $scope.desTypeAction = function (idx, objVal) {
        objVal.typeDescAction = true;
    }
    $scope.changeDesAction = function (idx, objVal) {
        objVal.typeDescAction = false;
    }

    $scope.priOptions = [
      { label: 'High', value: 1 },
      { label: 'Medium', value: 2 },
      { label: 'Low', value: 3 }
    ];
    $scope.priAction = $scope.priOptions[1];
    $scope.priTypeAction = function (index, objVal) {
        console.log(index);
        objVal.typePriAction = true;
    };
    $scope.changePriTypeAction = function (objVal) {
        objVal.typePriAction = false;
    }
    /* ************************************************ */
});

工作演示

enter image description here

Answer 2

以下是plunker。

你应该为每个单独的属性保留标志，所以为这些标志定义数组，像这样，

    $scope.typeAction = [];
    $scope.typeDescAction = [];
    $scope.typePriAction = [];

并使用$index的{{1}}属性设置它们，例如

ng-repeat

你应该通过一直发送索引来编辑你的功能，例如，

ng-show="!typeAction[$index]"

Answer 3

我有一个简单的方法来捕获特定元素的上下文（使用'this'）并设置ng -repeat typeAction的局部变量。

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp" ng-controller="myCtrl">
    <table class="table ">
      <tbody>
        <tr class="list-row" ng-repeat="form in todoData">
          <td class="list-row-content">


              <p>
                <a>{{form.title}}</a>
              </p>

             <span>
             Type:                   <a ng-show="!typeAction" ng-click="selectTypeAction($index,this)">{{selectedAction.label}}</a>
                  <select ng-change="changeTypeAction(this)" ng-show="typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
                </span>


                <span class="tag-sec"> 
              Description:                   <a ng-show="!typeDescAction" ng-click="desTypeAction($index,this)">{{desType}}</a>
                  <input type="text" value="" ng-show="typeDescAction" ng-model="desType" ng-blur="changeDesAction($index,this)" />
                </span>

                <span class="tag-sec">
             Priority:                   <a ng-show="!typePriAction" ng-click="priTypeAction($index,this)">{{priAction.label}}</a>
                  <select ng-change="changePriTypeAction(this)" ng-show="typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
                </span>

          </td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create Google Logo'},
            {'title':'Talk to XYZ about Google'},
            {'title':'Testing Google Coding'},
            {'title':'Create Documentaion about Google'},
            {'title':'Create Client Sample form'},
            {'title':'Modify Top Navigation'},
            {'title':'Change Footer text and color'},
            {'title':'Redesign Google Dashboard'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];
        $scope.selectedAction =$scope.options[1];
        $scope.selectTypeAction = function(index,context){
          console.log(index);
          context.typeAction = true;
        };
        $scope.changeTypeAction = function(context){
          context.typeAction = false;
        }

        $scope.desType = 'Google logo needs a new concept';
        $scope.desTypeAction = function(idx,context){
          context.typeDescAction = true;
        }
        $scope.changeDesAction = function(idx,context){
          context.typeDescAction = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction =$scope.priOptions[1];
        $scope.priTypeAction = function(index,context){
          console.log(index);
          context.typePriAction = true;
        };
        $scope.changePriTypeAction = function(context){
          context.typePriAction = false;
        }
        /* ************************************************ */
});

Plunker

Answer 4

尝试这种方式按索引索引而不是全局范围

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope){

    /* ************************************************ */
        $scope.todoData = [
            {'title':'Create google Logo','discription':'google logo needs a new concept'},
            {'title':'Talk to Sandeep about google','discription':'google logo needs a new concept'},
            {'title':'Testing google Coding','discription':'google logo needs a new concept'},
            {'title':'Create Documentaion about google','discription':'google logo needs a new concept'},
            {'title':'Create Client Sample form','discription':'google logo needs a new concept'},
            {'title':'Modify Top Navigation','discription':'google logo needs a new concept'},
            {'title':'Change Footer text and color','discription':'google logo needs a new concept'},
            {'title':'Redesign google Dashboard','discription':'google logo needs a new concept'}
          ]


        $scope.options = [
          { label: 'Action Item', value: 1 },
          { label: 'Defect', value: 2 },
          { label: 'Meeting Invite', value: 3 },
          { label: 'Issue', value: 4 },
          { label: 'Enhancement', value: 5 },
          { label: 'Risk', value: 6 },
          { label: 'Proposal', value: 7 }
        ];

        $scope.selectedAction =$scope.options[1];


        $scope.selectTypeAction = function(index){ 
          $scope.todoData[index].typeAction = true;
        }; 

        $scope.changeTypeAction = function(index){       
         $scope.todoData[index].typeAction = false;
        }


        $scope.desTypeAction = function(idx){
        $scope.todoData[idx].typeDescAction = true;
        }
        $scope.changeDesAction = function(idx){
       $scope.todoData[idx].typeDescAction  = false;
        }

        $scope.priOptions = [
          { label: 'High', value: 1 },
          { label: 'Medium', value: 2 },
          { label: 'Low', value: 3 }
        ];
        $scope.priAction = $scope.priOptions[1];

        $scope.priTypeAction = function(index){ 
         $scope.todoData[index].typePriAction = true;
        };
        $scope.changePriTypeAction = function(index){
          $scope.todoData[index].typePriAction= false;
        }
        /* ************************************************ */
});

HTML CODE

 <tr   ng-repeat="form in todoData">

        <td > 



              <p><a>{{form.title}}</a></p>






            <span class="tag-sec">
             Type: <a ng-show="!form.typeAction" ng-click="selectTypeAction($index)">{{selectedAction.label}}</a>
             <select ng-change="changeTypeAction($index)" ng-show="form.typeAction" ng-model="selectedAction" ng-options="opt as opt.label for opt in options"></select>
            </span> 
            <span class="tag-sec"> 
              Description: <a ng-show="!form.typeDescAction" ng-click="desTypeAction($index)">{{form.discription}}</a>
              <input type="text"   ng-show="form.typeDescAction" ng-model="form.discription" ng-blur="changeDesAction($index)" />
            </span>
            <span class="tag-sec">
             Priority: <a ng-show="!form.typePriAction" ng-click="priTypeAction($index)">{{priAction.label}}</a>
             <select ng-change="changePriTypeAction($index)" ng-show="form.typePriAction" ng-model="priAction" ng-options="opt as opt.label for opt in priOptions"></select>
            </span>

        </td>
      </tr>

Plunker Demo URL

如何修改角度js中的行内容？

4 个答案:

过去这个HTML COde

过去这个js代码

工作演示