jquery - 각도의 li 버튼에서 이 행을 삭제하는 방법은 무엇입니까?
高洛峰
高洛峰 2017-05-15 17:13:51
0
2
695

//HTML 부분
<ul class="rows">

으아악

</ul>

//js 부분
$scope.redact = function() {

으아악

왜 댓글창에 피드백이 없나요? ? 잘못된? 무엇이 잘못되었나요? 어떻게 바꾸나요?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

모든 응답(2)
小葫芦

Angular는 데이터 기반 모델입니다. 행을 삭제하면 배열의 해당 위치에서 요소를 삭제하면 됩니다.

즉:

으아아아
習慣沉默

ng-click을 삭제 버튼에 바인딩해야 합니다. 왜냐하면 현재 행의 삭제 버튼을 클릭하여 현재 행을 삭제하는 것이기 때문입니다. ng-click,因为你要实现的是点击当前行的删除按钮,删除当前行。

<button class="showBtn" ng-show="value.show" ng-click="removeLine($index)">删除</button class="showBtn" >
$scope.removeLine = function(index) {
  $scope.data.splice(index, 1);
}

至于 $index 是啥,其实就是 ng-repeat 过程中,一个隐藏的值。$index 存在于每一个生成的元素中,从 0 开始。$scope.data 也是从 index 为 0 开始,所以就有了上面的写法。只要你传入了当前的 $index,就可以定位到要删除的数据,直接在 data 中删除就行。数据改变的时候就会自动更新页面显示内容,这是数据驱动的一个特点。


没看懂你想在 $scope.redact 里面实现什么。如果你改 data.show,然后又在 button 里面写了 ng-show="value.show",那么证明这个 show 是用来控制 “删除” 按钮显示与否的,而不是去控制当前行显示与否。因此,看不出这段代码与你需求之间有何关联
另外,$(".change").html() 你这是在用 jQuery 去实现 toggle?jQuery 的思路与 AngularJS 就完全不同。jQuery 是事件驱动,AngularJS 是数据驱动。这里如果你要实现按钮文字 “编辑” 换成 “完成”,完全可以通过 $scope{{}}(interpolation)来实现。比如:

$scope.buttonText = '编辑';

<button>{{buttonText}}</button>

然后给这个 button 加上 ng-click

<button ng-click="edit()">{{buttonText}}</button>

然后写好回调:

$scope.edit = {
  if ($scope.buttonText === '编辑') {
    $scope.buttonText = '完成';
  } else if ($scope.buttonText === '完成') {
    $scope.buttonText = '编辑';
  }
}

这样就可以实现最基本的 toggle。可以做的优化是,如果你的状态只有编辑和完成两种,那么完全可以设置一个 flag,$scope.editFlag = truetrue 代表编辑状态,false 代表完成状态。参照上面的思路,if 里面直接用这个 $scope.editFlag 으아악 으아악

$index는 실제로 ng-repeat 과정에서 숨겨진 값입니다. $index는 생성된 모든 요소에 0부터 시작하여 존재합니다. $scope.data도 인덱스 0부터 시작하므로 위와 같은 작성방법이 있습니다. 현재 $index를 전달하기만 하면 삭제할 데이터를 찾아 data에서 직접 삭제할 수 있습니다. 데이터가 변경되면 페이지 표시 내용이 자동으로 업데이트되는데, 이는 데이터 기반의 특성입니다.

$scope.redact에서 무엇을 달성하려는지 이해할 수 없습니다. data.show를 변경한 후 버튼ng-show="value.show"를 쓰면 이 show는 현재 행의 표시 여부를 제어하는 ​​것이 아니라 "삭제" 버튼의 표시 여부를 제어하는 ​​데 사용됩니다. 따라서 이 코드와 귀하의 요구 사항 사이에는 아무런 연관성이 없습니다.
또한 $(".change").html() 토글을 구현하기 위해 jQuery를 사용하고 있습니까? jQuery의 아이디어는 AngularJS와 완전히 다릅니다. jQuery는 이벤트 중심이고 AngularJS는 데이터 중심입니다. 여기에서 버튼 텍스트 "Edit"를 "Done"으로 바꾸려면 $scope{{}}(보간)을 통해 수행할 수 있습니다. 예: 🎜 으아악 🎜그런 다음 이 버튼에 ng-click🎜을 추가하세요. 으아악 🎜그런 다음 콜백을 작성하세요. 🎜 으아악 🎜이 방법으로 가장 기본적인 토글을 얻을 수 있습니다. 수행할 수 있는 최적화는 상태에 편집과 완료라는 두 가지 상태만 있는 경우 $scope.editFlag = true 플래그를 설정할 수 있다는 것입니다. true는 편집 상태를 나타내고, false는 완료 상태를 나타냅니다. 위의 아이디어를 참조하여 if에서 직접 이 $scope.editFlag를 사용하여 판단하세요. 🎜 🎜AngularJS를 사용하고 있으므로 현재 요구사항에 맞게 jQuery를 사용할 필요는 없습니다🎜
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿