angularjs удалить строку из таблицы цвет нарушить стиль

Question

angularjs удалить строку из таблицы цвет нарушить стиль

0

Привет я пытаюсь удалить строку из таблицы в угловом первых двух строках с красным фоном, а другой с белым.

если я попытаюсь удалить последнюю строку, она будет удалена, но цвет будет только для первой строки (он должен быть как для первой, так и для второй строки)

пример ниже в plnkr: попробуйте удалить последнюю строку щелчком по x в coulmn University:

http://plnkr.co/edit/6td3Ywfeoe502wsQFNGO?p=preview

index.html:

<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <script src="script.js" ></script>
    <script src="http://code.angularjs.org/1.1.5/angular.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
    <label>Search:</label>
<input type="search" ng-model="search" placeholder="Enter to Search">
    </div>
<div id="table1" ng-controller="table">
    <table  cellpadding="0" border="0" cellspacing="0"  >
        <tr id="heading">
            <th>Roll NO:</th>
            <th>Student Name:</th>
            <th>University:</th>
        </tr>
        <tr class="color2" ng-class="student.color" ng-repeat="student in students | filter:search | filter:new_search">
            <td>{{student.Rollno}} <input type="checkbox" ng-model="checked[$index]"> </td>
            <td>{{student.Name}}</td>
            <td>{{student.Uni}} <button ng-click="remove($index)">x </button></td>
        </tr>
    </table>
    <div >
        <label>Rollno:</label>
        <input type="number" ng-model="new_rollno"> <br>
        <label>Name:</label>
        <input type="text" ng-model="new_name"><br>
        <label>University:</label>
        <input type="text" ng-model="new_uni"><br>
        <button ng-click="save()">Save</button>
    </div>
    <div style="float: right; margin-right: 300px;margin-top: -200px;">

    <button ng-click="remove($index)" >Remove</button>
</div>
</div>
</body>
</html>

script.js:

// Code goes here

    var table = function($scope)
    {
     $scope.students=[
         {Rollno: "1122",Name: "abc",Uni: "res",color:"red"},
         {Rollno: "2233",Name: "def",Uni: "tuv",color:"red"},
         {Rollno: "23432",Name: "g325325hi",Uni: "wxy"},
         {Rollno: "3344",Name: "ghi",Uni: "wxy"}
     ];
     $scope.save=function(){
     $scope.students.push({
     Rollno: $scope.new_rollno,
     Name: $scope.new_name,
     Uni: $scope.new_uni
     });
         $scope.new_rollno="";
         $scope.new_name="";
         $scope.new_uni=""
     };
     $scope.checked=[];
      $scope.remove=function(index){
          alert($scope.checked);
          $scope.students.splice(function(record){
              return $scope.checked[$index];
          },1);
      };
    };

Asad 22 нояб. 2015, в 14:35

Источник

0

сращивание не позволяет функцию в качестве параметра
Grundy 22 нояб. 2015, в 13:45
0

Вы можете посмотреть пример в ссылке plnkr, он работает без проблем, я сделал это без функции с параметром, и получить тот же результат, проблема в том, что при удалении строки, например, последней строки, поведение стиля неправильное
Asad 22 нояб. 2015, в 13:48
1

в вашей планкре та же строка $scope.students.splice(function(record){ вы передаете функцию в качестве параметра для соединения, но должны передать начальный индекс
Grundy 22 нояб. 2015, в 13:49
0

вы можете сделать что-то подобное $ scope.remove = function (index) {alert ($ scope.checked); $ Scope.students.splice (индекс, 1); }; даже с этим не получится
Asad 22 нояб. 2015, в 13:51
1

Вы спрашиваете меня или предлагаете это? :-D
Grundy 22 нояб. 2015, в 13:52
0

код был изменен, $ scope.remove = function (index) {alert ($ scope.checked); $ Scope.students.splice (индекс, 1); }; нет у меня все еще есть проблема даже с этим изменением проблема не с использованием
Asad 22 нояб. 2015, в 13:53
1

а также? Вы видите, что все работает правильно? :-)
Grundy 22 нояб. 2015, в 13:53
0

@Grundy Гранди, ты должен ответить, чтобы я мог тебя поддержать. :)
Dave van Herten 22 нояб. 2015, в 13:54
0

что вы видите в коде, что не работает? дайте мне ответ, может быть, я ошибаюсь у меня все еще есть проблема при попытке удалить последнюю строку, стиль будет нарушен
Asad 22 нояб. 2015, в 13:55
1

@Asad Возможно, мы не понимаем, чего ты хочешь. В вашем исходном плунжере сплайсинг не удалял последний элемент, а удалял первый, поэтому вы потеряли свой красный ряд. С обновлением от Grundy и исправлением склеивания последняя строка удаляется должным образом, оставляя две красные строки сверху. Который, по нашему мнению, решает вашу проблему. Возможно, вам следует обновить свой вопрос и объяснить, что вы на самом деле хотите.
Dave van Herten 22 нояб. 2015, в 14:03
0

Спасибо Runesun, может быть, я не был уверен, что я сожалею об этом, код был обновлен, я столкнулся именно с проблемой, это удалить правильную строку, но я потерял красный
Asad 22 нояб. 2015, в 14:07
0

@Asad, что ты имеешь в виду, я потерял красный ? если вы не удалите красную строку, вы не потеряете ее
Grundy 22 нояб. 2015, в 14:09
0

@Asad Как вы имеете в виду, когда вы удаляете одну из первых двух строк, красный исчезает, и вы всегда хотите, чтобы первые две строки были красными? Это потому, что только ваши первые две части данных (одна из которых вы удалили) имеют значение красного цвета. Если вы всегда хотите, чтобы первые две строки были красными, измените свой ng-класс на «$ index <2? 'Red': 'color2'" и удалите цвет из ваших данных, так как это внешний интерфейс, а не данные.
Dave van Herten 22 нояб. 2015, в 14:15
0

нет @Runesun в любом случае он не воспроизводится. Я приложу свой код позже, так или иначе, я присоединю свой код позже, спасибо за помощь
Asad 22 нояб. 2015, в 14:19

Показать ещё 12 комментариев

Теги:

javascript

jquery

angularjs

html5

css3

1 ответ

Ещё вопросы

сращивание не позволяет функцию в качестве параметра
Вы можете посмотреть пример в ссылке plnkr, он работает без проблем, я сделал это без функции с параметром, и получить тот же результат, проблема в том, что при удалении строки, например, последней строки, поведение стиля неправильное
в вашей планкре та же строка $scope.students.splice(function(record){ вы передаете функцию в качестве параметра для соединения, но должны передать начальный индекс
вы можете сделать что-то подобное $ scope.remove = function (index) {alert ($ scope.checked); $ Scope.students.splice (индекс, 1); }; даже с этим не получится
Вы спрашиваете меня или предлагаете это? :-D
код был изменен, $ scope.remove = function (index) {alert ($ scope.checked); $ Scope.students.splice (индекс, 1); }; нет у меня все еще есть проблема даже с этим изменением проблема не с использованием
а также? Вы видите, что все работает правильно? :-)
@Grundy Гранди, ты должен ответить, чтобы я мог тебя поддержать. :)
что вы видите в коде, что не работает? дайте мне ответ, может быть, я ошибаюсь у меня все еще есть проблема при попытке удалить последнюю строку, стиль будет нарушен
@Asad Возможно, мы не понимаем, чего ты хочешь. В вашем исходном плунжере сплайсинг не удалял последний элемент, а удалял первый, поэтому вы потеряли свой красный ряд. С обновлением от Grundy и исправлением склеивания последняя строка удаляется должным образом, оставляя две красные строки сверху. Который, по нашему мнению, решает вашу проблему. Возможно, вам следует обновить свой вопрос и объяснить, что вы на самом деле хотите.
Спасибо Runesun, может быть, я не был уверен, что я сожалею об этом, код был обновлен, я столкнулся именно с проблемой, это удалить правильную строку, но я потерял красный
@Asad, что ты имеешь в виду, я потерял красный ? если вы не удалите красную строку, вы не потеряете ее
@Asad Как вы имеете в виду, когда вы удаляете одну из первых двух строк, красный исчезает, и вы всегда хотите, чтобы первые две строки были красными? Это потому, что только ваши первые две части данных (одна из которых вы удалили) имеют значение красного цвета. Если вы всегда хотите, чтобы первые две строки были красными, измените свой ng-класс на «$ index <2? 'Red': 'color2'" и удалите цвет из ваших данных, так как это внешний интерфейс, а не данные.
нет @Runesun в любом случае он не воспроизводится. Я приложу свой код позже, так или иначе, я присоединю свой код позже, спасибо за помощь

Grundy · Answer 1 · 2015-11-22T12-57-00.000Z

Основная проблема в коде: первый параметр для сращивания - должен быть начальный индекс, но вы пытаетесь передать функцию. Если использование переданного индекса все работает нормально

$scope.students.splice(index,1);

В фрагменте вы можете видеть, что даже когда вы удаляете последнюю строку - все работает

angular.module('app', [])
  .controller('tableCtrl', ['$scope',
    function($scope) {
      $scope.students = [{
        Rollno: "1122",
        Name: "abc",
        Uni: "res",
        color: "red"
      }, {
        Rollno: "2233",
        Name: "def",
        Uni: "tuv",
        color: "red"
      }, {
        Rollno: "23432",
        Name: "g325325hi",
        Uni: "wxy"
      }, {
        Rollno: "3344",
        Name: "ghi",
        Uni: "wxy"
      }];
      $scope.save = function() {
        $scope.students.push({
          Rollno: $scope.new_rollno,
          Name: $scope.new_name,
          Uni: $scope.new_uni
        });
        $scope.new_rollno = "";
        $scope.new_name = "";
        $scope.new_uni = ""
      };
      $scope.checked = [];
      $scope.remove = function(index) {
        $scope.students.splice(index, 1);
      };
    }
  ])

/* Styles go here */

table {
  width: 100%;
}
table,
th,
td {
  border: 1px solid black;
}
.color {
  background-color: lightgray;
}
.color2 {
  background-color: white;
}
#heading {
  background-color: black;
  color: white;
}
tr:hover {
  background-color: darkblue;
  color: white;
  font-weight: bold;
}
#images img {
  margin-top: 10px;
}
#img1 {
  width: 33.4%;
}
#img2 {
  width: 66%;
  height: 255px;
}
#table1 {
  margin-top: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
  margin-top: 5px;
}
button {
  margin-top: 5px;
  padding: 5px;
}
.red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="tableCtrl">
  <div>
    <label>Search:</label>
    <input type="search" ng-model="search" placeholder="Enter to Search">
  </div>
  <div id="table1">
    <table cellpadding="0" border="0" cellspacing="0">
      <tr id="heading">
        <th>Roll NO:</th>
        <th>Student Name:</th>
        <th>University:</th>
      </tr>
      <tr class="color2" ng-class="student.color" ng-repeat="student in students | filter:search | filter:new_search">
        <td>{{student.Rollno}}
          <input type="checkbox" ng-model="checked[$index]">
        </td>
        <td>{{student.Name}}</td>
        <td>{{student.Uni}}
          <button ng-click="remove($index)">x</button>
        </td>
      </tr>
    </table>
    <div>
      <label>Rollno:</label>
      <input type="number" ng-model="new_rollno">
      <br>
      <label>Name:</label>
      <input type="text" ng-model="new_name">
      <br>
      <label>University:</label>
      <input type="text" ng-model="new_uni">
      <br>
      <button ng-click="save()">Save</button>
    </div>
    <div style="float: right; margin-right: 300px;margin-top: -200px;">


    </div>
  </div>
</div>

спасибо @Grundy, это правильный сценарий, но он все еще воспроизводится в моем локальном приложении, я попытался сделать что-то равное, я приложу свой код позже, спасибо за помощь
@Asad, обратите внимание: я использую последнюю угловую версию 1.4.7 а в вашем примере вы используете 1.1.5 .
спасибо @Grundy и Runesun проблема была, когда я удалял, я был удален неправильный индекс из-за заказа, я решил проблему с этой ссылкой: stackoverflow.com/questions/16118762/… проблема, которую я описал неправильный сценарий, я сожалею об этом и большое спасибо за помощь