2016-11-18 3 views
-1

Я пытаюсь создать приложение списка дел в угловом. Когда вы добавляете новый элемент, он добавит в поле ввода (по умолчанию, я отключил его) внутри таблицы, а также добавлю ссылку «Редактировать» рядом с этим вводом. Как только я нажму кнопку «Изменить», откроется окно ввода. (я получил его работу с этим кодом (Edit).Как написать функцию для целевой переменной для ng отключить, что внутри ng повторить?

Мой вопрос заключается в том, как заменить ng-click = "editable =! editable" на ng-click = "edit()". Я попытался написать, что функция Edit , но я не могу заставить его работать. Пожалуйста, помогите. My code on jsfiddle

спасибо.

<body ng-app="shoppingList"> 
<div ng-controller="mainController"> 
    <h1>My Shopping List</h1> 
    <form class="form-inline" ng-submit="addItem()"> 
     <div class="form-group"> 
     <input type="text" ng-model="newItem"> 
     </div> 
     <input type="submit" value="Add"> 
    </form> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <th>Item</th> 
        <th>Edit</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="item in items track by $index"> 
        <td><input ng-disabled="!editable" type="text" value="{{item}}"></td> 
        <td ng-click="editable=!editable">Edit</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<script> 
(function(){ 
    var app = angular.module('shoppingList',[]); 
    app.controller('mainController',function($scope){ 
     $scope.items=[]; 
     $scope.addItem = function(){ 
      $scope.items.push($scope.newItem); 
     }; 

    $scope.edit = function(){ 
    // i need to move editable=!editable into this function 
    // but i don't know how to do that 
    } 

    }); 

}()); 
</script> 
+0

Ваш код [не работает] (http://importblogkit.com/2015/07/does-not-work/)? –

+0

@Robert, мой код работает нормально, но мне нужно заменить ng-click = "editable =! Editable" на ng-click = "edit()", потому что мне нужно использовать эту функцию edit(), чтобы добавить больше funtion , Спасибо – sopanhanita

+0

Просто объявите '$ scope.editable = true;' как '$ scope.items = [];' в контроллере. Но это всего лишь простой взлом. Должен ли «редактируемый» быть конкретным для каждой строки/строки? '$ scope.editable =! $ scope.editable; console.log ($ scope.editable) ' – Searching

ответ

1

Вы можете сохранить редактируемый свойство todo элемента, а затем нам это так.

$scope.addItem = function(){ 
    $scope.items.push({text: $scope.newItem,editable:false}); 
}; 

$scope.edit = function(item){  
    item.editable = !item.editable; 
    console.log(item) 
} 
$scope.save = function(item){ 
    console.log("saved")  
    item.editable = !item.editable; 
} 

HTML

<tr ng-repeat="item in items track by $index"> 
<td><input ng-disabled="!item.editable" ng-blur="save(item)" type="text" value="{{item.text}}"></td> 
<td ng-click="edit(item)">Edit</td> 
</tr> 

Я думаю, что это простейшее, но всегда есть лучший подход. Дайте нам знать. Что такое ngBlur

+0

он работает как шарм. https://jsfiddle.net/sopanhanita/d8ke1jjk/9/ Большое спасибо @Searching. я узнаю из него. – sopanhanita