7

我对 angularjs 比较陌生。我有一些代码（HTML + JS）允许用户从范围内的数组中添加和删除条目。但是现在我正在为不同的数组大量重复代码。我知道这可以重新考虑，但我不确定角度方法，除了我可能想要使用指令这一事实。非常感谢任何帮助。

的HTML

<div class="control-group" ng-class="{error: form.profile.seeking.$invalid}" ng-controller="SeekingCtrl">
    <label class="control-label" for="profile.seeking">Seeking</label>
<div class="controls">
    <ul ng-repeat="seeks in profile.seeking">
      <li>{{seeks}} <button class="btn" ng-click="removeSeeks()">Remove</button></li>
    </ul>
    <input type="text" ng-model="newseeks" id="profile.seeking">
    <button class="btn" ng-disabled="!newseeks" ng-click="addSeeks()">Add new</button>
</div>


<div class="control-group" ng-class="{error: form.project.offering.$invalid}" ng-controller="OfferingCtrl">
<label class="control-label" for="project.offering">Offering</label>
<div class="controls">
    <ul ng-repeat="offer in project.offering">
      <li>{{offer}} <button class="btn" ng-click="removeOffer()">Remove</button></li>
    </ul>
    <input type="text" ng-model="newoffer" id="project.offering">
    <button class="btn" ng-disabled="!newoffer" ng-click="addOffer()">Add new</button>
</div>

Javascript

var SeekingCtrl = function($scope) {
$scope.addSeeks = function() {
    $scope.profile.seeking = $scope.profile.seeking || [];
    $scope.profile.seeking.push($scope.newseeks);
    $scope.newseeks = "";
};

$scope.removeSeeks = function() {
    $scope.profile.seeking = _.without($scope.profile.seeking, this.seeks);
};
};

var OfferingCtrl = function($scope) {
$scope.addOffer = function() {
    $scope.project.offers = $scope.project.offers || [];
    $scope.project.offers.push($scope.newoffer);
    $scope.newoffer = "";
};

$scope.removeOffer = function() {
    $scope.project.offers = _.without($scope.project.offers, this.offer);
};
};
4

2 回答 2

8

终于想通了。

的HTML

<div list-editor list="profile.skills" label="Skills">
</div>

指令

<div class="control-group" ng-controller="ListEditorCtrl">
    <label class="control-label" for="{{list}}">{{label}}</label>
    <div class="controls">
    <ul ng-repeat="item in list">
        <li>{{item}} 
            <button class="btn" ng-click="removeItem()"><i class="icon-remove"></i></button>
            <button class="btn" ng-show="!$first" ng-click="moveUpItem()"><i class="icon-chevron-up"></i></button>
            <button class="btn" ng-show="!$last" ng-click="moveDownItem()"><i class="icon-chevron-down"></i></button>
        </li>
    </ul>
    <input type="text" ng-model="newitem" id="{{list}}" />
    <button class="btn" ng-disabled="!newitem" ng-click="addItem()">Add new</button>
</div>


p4pApp.directive('listEditor', function () {
    return {
        restrict: 'A',
        scope: {
            list: '='
        },
        templateUrl: '/templates/common/list_editor_directive.html',
        link: function(scope, element, attrs) {
            scope.label = attrs.label;
        }
    };
}
);

控制器

var ListEditorCtrl = function($scope) {
$scope.addItem = function() {
    $scope.list = $scope.list || [];
    $scope.list.push($scope.newitem);
    $scope.newitem = "";
};

$scope.removeItem = function() {
    $scope.list.splice(_.indexOf($scope.list, this.item),1);
};
};
于 2013-05-28T10:04:02.520 回答
0

你的问题对我来说不够清楚，如果你把一个更容易理解的示例代码放在一个plunker上会更好，但我会试着从我的理解中回答。
在你的 services.js 文件中做这样的事情：

app.factory('Seeks', ['$http', function($http){
  var Url  = "seeks.json";
  var Seeks = $http.get(Url).then(function(response){
     return response.data;
  });
  return Seeks;
}]);
app.factory('Offers', ['$http', function($http){
  var Url  = "offers.json";
  var Offers = $http.get(Url).then(function(response){
     return response.data;
  });
  return Offers;
}]);

在你的 controllers.js 中做这样的事情：

var SeekingCtrl = function($scope, Seeks) {
  Seeks.then(function(data){
    $scope.seeks = data;
  });
  $scope.addSeeks = function(newseeks) {
      $scope.seeks.push(newseeks);
      newseeks = "";
  };

  $scope.removeSeeks = function(seek) {
      $scope.seeks = _.without($scope.seeks, seek);
  };
};

var OfferingCtrl = function($scope, Offers) {
  Offers.then(function(data){
    $scope.offers = data;
  });
  $scope.addOffer = function(newoffer) {
      $scope.offers.push(newoffer);
      newoffer = "";
  };

  $scope.removeOffer = function(offer) {
      $scope.offers = _.without($scope.offers, offer);
  };
};

并且不要忘记将Offers和注入Seeks到 app.js 文件中的控制器中，如下所示：

SeekingCtrl.$inject  = ['$scope', 'Seeks'];
OfferingCtrl.$inject = ['$scope', 'Offers'];

更新：

只需将所有内容放在一个控制器中，如下所示：

var MainCtrl = function($scope, Seeks, Offers) {
  Seeks.then(function(data){
    $scope.seeks = data;
  });
  Offers.then(function(data){
    $scope.offers = data;
  });
  $scope.addSeeks = function(newseeks) {
      $scope.seeks.push(newseeks);
      newseeks = "";
  };
  $scope.addOffer = function(newoffer) {
      $scope.offers.push(newoffer);
      newoffer = "";
  };
  $scope.removeSeeks = function(seek) {
      $scope.seeks = _.without($scope.seeks, seek);
  };
  $scope.removeOffer = function(offer) {
      $scope.offers = _.without($scope.offers, offer);
  };
};

更新2：

var MainCtrl = function($scope, Seeks, Offers) {
  Seeks.then(function(data){
    $scope.seeks = data;
  });
  Offers.then(function(data){
    $scope.offers = data;
  });
  $scope.add = function(item, type) {
      $scope[type].push(item);
      item = "";
  };
  $scope.remove = function(item, type) {
      $scope[type] = _.without($scope[type], item);
  };
};

类型可以是搜索或报价。
对于超出我范围的服务。
希望这有帮助。

于 2013-04-12T21:12:47.993 回答