angularjs 干扰回显 php 变量答案

【问题标题】：angularjs interferes with echoing php variableangularjs 干扰回显 php 变量
【发布时间】：2017-07-11 02:03:58
【问题描述】：

我正在尝试提取一个 php 变量 ($ purpose) 并将其显示在选项选择上。我拥有的代码（见下文）仅在我取出元素属性 ng-model=" purpose" 时才有效。如果我将 ng-model 留在原地，则选项 select 会显示 Purpose，这表明 php echoing 没有通过。似乎在呼应 php 变量并使用 angularjs 相互冲突。有人有这个问题吗？有解决办法吗？

<select id="purpose" class="form-control custom-select" name="purpose" value="<?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" ng-model="purpose" autocomplete="on" required/>
  <option <?php if($purpose == "") echo 'selected';?> value="">Purpose</option>
  <option <?php if($purpose == "1030") echo 'selected';?> value="1030">1Exchange</option>
  <option <?php if($purpose == "1040") echo 'selected';?> value="1040">Non-exchange</option>
  <option <?php if($purpose == "1050") echo 'selected';?> value="1050">Financing</option>
</select>

【问题讨论】：

标签： javascript php jquery angularjs

【解决方案1】：

在使用 ng-model 时不要使用 value 属性。 只需初始化一个变量 purpose 并为其分配 PHP 变量。如下：

<select ng-init="purpose = <?php if(isset($purpose) or !empty($purpose)) {echo $purpose;}?>" id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required/>
      <option <?php if($purpose == "") echo 'selected';?> ng-value="">Purpose</option>
      <option <?php if($purpose == "1030") echo 'selected';?> ng-value="1030">1Exchange</option>
      <option <?php if($purpose == "1040") echo 'selected';?> ng-value="1040">Non-exchange</option>
      <option <?php if($purpose == "1050") echo 'selected';?> ng-value="1050">Financing</option>
    </select>

【讨论】：

【解决方案2】：

虽然您可以使用这种样式使其工作，但建议使用 JSON 将数据从后端填充到 Angular。

<?php
$purpose_arr = array(
  "1030" => "1Exchange",
  "1040" => "Non-exchange",
  "1050" => "Financing"
);

echo "<script> var purpose='" + json_encode($purpose_arr) + "'; </script>"
?>

html:
<select id="purpose" class="form-control custom-select" name="purpose" ng-model="purpose" autocomplete="on" required
    ng-options="value as key for (key, value) in purpose" />
    <option value="">Purpose</option>
</select>

controller:
$scope.purpose = purpose;

【讨论】：