angularfire 中 ul 列表的三种方式绑定

Question

我正在尝试将数据同步到 firebase。

这可以使用 3 方式绑定。

var ref = new Firebase('xxxxxxxxx');

$scope.mydata = $firebaseObject(ref);

<input type="text" id="myid" ng-model="mydata.foo" ng-change="mydata.$save()" placeholder="insert here...">

我正在努力让它在下面工作，但我很挣扎。

var ref = new Firebase('xxxxxxxxx');

$scope.mydata = $firebaseObject(ref);

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a href="#" ng-click="mydata.$save()" ng-model="mydata.foo">Action</a></li>
  <li><a href="#" ng-click="mydata.$save()" ng-model="mydata.foo">Another action</a></li>
  <li><a href="#" ng-click="mydata.$save()" ng-model="mydata.foo">Something else here</a></li>
</ul>

Answer 1

您可以将 $event 传递给函数以获取目标元素，从而获得 innerText。但是，最好将其用作指令，因为与控制器中的 DOM 进行交互是不符合犹太教规的。

Plnkr Demo

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController);

function MyController($scope, rootRef, $firebaseObject) {
  $scope.mydata = $firebaseObject(rootRef.child('data'));
  $scope.updateText = function updateText($event) {
    $scope.mydata.foo = $event.target.innerText;
    $scope.mydata.$save();
  };
}

然后在模板中，传入 $event.

  <input type="text" id="myid" ng-model="mydata.foo"  placeholder="insert here...">
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#" ng-click="updateText($event)">Action</a></li>
    <li><a href="#" ng-click="updateText($event)">Another action</a></li>
    <li><a href="#" ng-click="updateText($event)">Something else here</a></li>
  </ul>

但是正如我之前提到的，您最好使用 <a> 标记创建一个指令。这处理了在引擎盖下获取 ng-click 的 innerText。

<update-link ng-model="mydata.foo">Update</update-link>

但是演示如何制作它是另一个问题:)

angularfire 中 ul 列表的三种方式绑定

Three way binding from a ul list in angularfire

javascript

angularjs

firebase

angularfire