Question

有没有办法通过函数有条件地将ng-model初始化为某个字符串？在下文中，ng-bind起作用，但ng-model不起作用：

var app = angular.module('app', []);
app.controller('mainCtrl', ['$scope', function ($scope) {
  $scope.value = "hello";
  $scope.value2 = "hello2";
  $scope.get = function (bool) {
      return (bool) ? "value" : "value2";
  };
}]);

<html ng-app="app">
  <body ng-controller="mainCtrl">
    <div ng-bind="{{get(true)}}"></div>
    <input ng-model="{{get(true)}}" />
  </body>
</html>

澄清编辑： 我有两个单独的数据集，给定的输入可以影响。它影响哪一个取决于模型中其他地方的值。有几十种不同的输入类型，我想避免将ng-switch写入每一个，因为这会变得相当混乱。

示例： http://plnkr.co/edit/fKlbN8qcjGjzqjRayviT?p=preview

Answer 1

这是有条件地设置模型值的最简洁，最简单的方法。

<input ng-model="yourModel" />然后在控制器中：

$scope.yourModel = (condition) ? 'hello1' : 'hello2';

编辑澄清问题

好的，我用ng-init想出了一些东西。显然你不能使用ng-model的函数。我还没试过，所以我很惊讶它不起作用。

我放弃了自定义指令，因为它不需要。

您的HTML将是这样的：

<div ng-init="input1 = getBinding(setB,2)">
  <input ng-model="input1" /> <!-- shows bbb -->
</div>
<div ng-init="input2 = getBinding(setA,0)">
  <input ng-model="input2" /> <!-- shows a -->
</div>
<div ng-init="input3 = getBinding(setA,2)">
  <input ng-model="input3" /> <!-- shows aaa -->
</div>

你的控制器：

app.controller('mainCtrl', ['$scope', function ($scope) {
  $scope.setA = ['a', 'aa', 'aaa'];
  $scope.setB = ['b', 'bb', 'bbb'];

  $scope.getBinding = function(set, index)
  {
    return set[index];
  }
}]);

所以继续前进，而不是设置input1 = ...，input2 = ...等名称，如果您要使用转发器，则可以使用$ index值创建模型名称像这样：

<div ng-repeat="setItem in setA" ng-init="setA$index = getBinding(setA, $index)">
  <input ng-model="setA$index" /> <!-- shows 3 inputs of values a, aa, aaa -->
</div>

<div ng-repeat="setItem in setB" ng-init="setB$index = getBinding(setB, $index)">
  <input ng-model="setB$index" /> <!-- shows 3 inputs of values b, bb, bbb-->
</div>

DEMO - http://plnkr.co/edit/70QG3s3ovppkXcUqOmPj?p=preview

希望你能提出解决方案。

Answer 2

假设你出于某种原因需要＆＃34;要在视图中执行此操作，可以使用init将变量设置为get函数的返回值，并将模型设置为该值

<div ng-controller="MyCtrl">
    <input ng-model="whatever.value" ng-init="whatever = get(true)" />
    {{var1}}
    {{whatever}}
</div>

function MyCtrl($scope) {
    $scope.var1 = { value: "hello" };
    $scope.var2 = { value: "hello2" };
    $scope.get = function (bool) {
        return (bool) ? $scope.var1 : $scope.var2;
    };
}

http://jsfiddle.net/dPn3A/

否则，只需在控制器中执行即可。

Answer 3

您可以像这样使用ngInit：

  <body ng-controller="MainCtrl" ng-init="titel=get(true)">
    <div ng-bind="titel"></div>
    <input ng-model="titel" />
  </body>

使用函数初始化ng-model字符串

3 个答案: