如何获得特定项目所选择？ [英] how to get specific item that selected?

问题描述

• 附截图。

我学习angularJS。
我不能找到一种方法来删除所选项目的删除按钮是点击。

有没有办法做到这一点？

code附：

 ＆LT; UL类=无样式＆GT;
            ＆LT;李NG重复=待办事项待办事项中的＆GT;
                ＆LT;输入类型=复选框NG模型=todo.done＆GT;
                ＆LT;跨度类=完成 -  {{todo.done}}＆GT; {{todo.text}}＆LT; / SPAN＆GT;
                ＆LT;按钮类=BTNNG点击=removeTodo（）＆GT;删除＆LT; /按钮＆GT;
            ＆LT; /李＆GT;
        ＆LT; / UL＆GT;
 

解决方案

\r

\r

VAR应用= angular.module（应用程序，[]）;\r
app.controller（MyCtrl功能（$范围）{\r
  \r
  $ scope.todos = [\r
    {文：学习AngularJS，完成：虚假}，{文：建立一个应用程序，完成：假}];\r
  \r
  $ scope.removeTodo =功能（指数）{\r
    $ scope.todos.splice（指数，1）;\r
    \r
    }\r
  \r
  $ scope.removeTodo2 =功能（待办事项）{\r
    VAR指数= getByValue（$ scope.todos，待办事项）;\r
    $ scope.todos.splice（指数，1）;\r
    \r
    }\r
  \r
  $ scope.addTodo =功能（待办事项）{\r
    VAR toDoObject = {文：待办事项，完成：虚假};\r
    $ scope.todos.push（toDoObject）;\r
    \r
  };\r
  \r
  $ scope.done =功能（待办事项）{\r
    angular.forEach（$ scope.todos，功能（索引，todo1）{\r
        如果（待办事项== todo1）\r
           ！$ scope.todos [指数] .done = $ scope.todos [指数] .done;\r
      }）\r
   \r
    \r
    }\r
  \r
  功能getByValue（ARR，价值）{\r
\r
  对于（VAR I = 0，艾朗= arr.length; I＆LT;艾朗;我++）{\r
\r
    如果（ARR [I]的.text ==值）回报我;\r
  }\r
}\r
  \r
  }）;

\r

.done {\r
  文本修饰：线通过;\r
  }

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=MyCtrl＆GT;\r
  \r
 ＆LT; UL类=无样式＆GT;\r
            ＆LT;李NG重复=待办事项由$指数待办事项跟踪＆GT;\r
                ＆LT;输入类型=复选框NG模型=todo.doneNG变化=完成（待）＆GT;\r
                ＆LT;跨度纳克级={'做'：todo.done ==真}＆GT; {{todo.text}}＆LT; / SPAN＆GT;\r
                ＆LT;按钮类=BTNNG点击=removeTodo（$指数）＆GT;删除＆LT; /按钮＆GT;\r
               ＆LT;按钮类=BTNNG点击=removeTodo2（todo.text）＆GT; Remove2＆LT; /按钮＆GT;\r
            ＆LT; /李＆GT;\r
        ＆LT; / UL＆GT;\r
  ＆LT;输入类型=文本NG模型=待办事项＆GT;\r
  ＆LT;输入类型=按钮NG点击=addTodo（待）VALUE =添加＆GT;\r
  \r
  ＆LT; / DIV＆GT;

\r

\r

\r

• screenshot attached.

I learning angularJS. And i can't find a way to remove the selected item that the 'Remove' button was click on.

Is there any way to do it ?

code attached:

        <ul class="unstyled">
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.done">
                <span class="done-{{todo.done}}">{{todo.text}}</span>
                <button class="btn" ng-click="removeTodo()">Remove</button>
            </li>
        </ul>

解决方案

var app = angular.module("app" , []);
app.controller("MyCtrl" , function($scope){
  
  $scope.todos = [
    {"text" :"Learn AngularJS","done":false},{"text" :"build an app","done":false}];
  
  $scope.removeTodo = function(index) {
    $scope.todos.splice(index,1);
    
    }
  
  $scope.removeTodo2 = function(todo) {
    var index = getByValue( $scope.todos,todo);
    $scope.todos.splice(index,1);
    
    }
  
  $scope.addTodo = function(todo){
    var toDoObject = {"text":todo,"done":false};
    $scope.todos.push(toDoObject);
    
  };
  
  $scope.done = function(todo){
    angular.forEach($scope.todos,function(index,todo1){
        if(todo == todo1)
           $scope.todos[index].done = !$scope.todos[index].done;
      })
   
    
    }
  
  function getByValue(arr, value) {

  for (var i=0, iLen=arr.length; i<iLen; i++) {

    if (arr[i].text == value) return i;
  }
}
  
  });

.done{
  text-decoration: line-through;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
  
 <ul class="unstyled">
            <li ng-repeat="todo in todos track by $index">
                <input type="checkbox" ng-model="todo.done" ng-change="done(todo)">
                <span ng-class="{'done' : todo.done == true}">{{todo.text}}</span>
                <button class="btn" ng-click="removeTodo($index)">Remove</button>
               <button class="btn" ng-click="removeTodo2(todo.text)">Remove2</button>
            </li>
        </ul>
  <input type="text" ng-model="todo">
  <input type="button" ng-click = "addTodo(todo)" value="Add">
  
  </div>

这篇关于如何获得特定项目所选择？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！