如何在div中显示ng-init的函数输出?

时间:2014-10-17 14:07:05

标签: javascript jquery angularjs

琐碎至

好的所以我有这个div我希望将一些值绑定到ng-if-ng已设置为true并且在调用ng-init之后...此时我的ng-init被调用但是消息没有绑定。我可能有错误的标签,但你得到我的意思..我希望在我的陈述变为真后调用该函数。

    <div ng-repeat="field in model.fieldData">
        <button class="btn-xs" ng-show="!isLocked(field.Id)" ng-click="openField(field)">
            Edit
        </button>

        <div ng-if="isLocked(field.Id)" ng-init="msg = getLockMessage(field.Id)" ng-bind="msg">
        </div>
    </div>

1 个答案:

答案 0 :(得分:2)

看看这个傻瓜:

plunker

是一个基于你的html的小例子,并且有效。稍微更改元素msg在元素父级内部的更改,因为如果存在大量的fieldData,则替换相同的变量。

JS:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = {
      fieldData: [{
      Id: 123,
      locked: false,
    }]
  };
  $scope.isLocked = function(element) {
    return element.locked;
  }
  $scope.openField = function(element) {
    element.locked = true;
  }
  $scope.getLockMessage = function(element) {
    return "message from " + element.Id
  }
});

和html:

  <div ng-repeat="field in model.fieldData">
        <button class="btn-xs" ng-show="!isLocked(field)" ng-click="openField(field)">
            Edit
        </button>

        <div ng-if="isLocked(field)" ng-init="field.msg = getLockMessage(field)" ng-        bind="field.msg">
        </div>
    </div>